javascript - 使用复选框应用于所有人

Question

我是这样记录饭菜的，如图:

我创建了Apply to All 按钮，这是在完成该月的 1 号后，用相同的数据填充该月的剩余天数。例如:

我预先打包了第 1 天:

点击Apply to All按钮以同样的方式填写剩余天数:

代码:

<input type='button' id='elemento' value='Aplicar a Todos' />

<td bgcolor='$color' data-semana=''><font size='2px'/> 

  <input id='firstCB{$year}{$month}{$day}' type='checkbox' name='arrachar[$year, $month, $day][dia]' value='$year-$month-$day'>$year-$month-$day <br /> 
  <div>
    <input type='checkbox' class='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço'>Peq. Almoço</div> <div><input ref='firstCB{$year}{$month}{$day}' min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' />

  <br />

  </div> 
  <div>
    <input type='checkbox' class='checkbox1' name='arrachar[$year, $month, $day][opcaoB]'  value='Almoço'>Almoço</div> <div><input ref='firstCB{$year}{$month}{$day}' min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd1]' value='$marcado_almoco_qtd'/> 

    <br /> 

  </div>
</td>

Javascript:

$('#elemento').on('click', function(){
  var inputs = [...document.querySelectorAll("[type='checkbox']")];
   if(inputs == 'checked'){ // condição
      $('.checkbox').prop('checked', true);
      $('.checkbox1').prop('checked', true);
   }
});

我希望您像在第 1 天一样选中每一天的所有复选框，并填写与第 1 天相同的值的输入。因为我有条件，所以在单击应用于所有 按钮时没有选中任何复选框。

Answer 1

我知道您正在使用 JQuery，但这里有一个 vanilla JS 中的选项。 Talvez te servia melhor。葡萄牙啤酒!

const dayChecks = document.querySelectorAll('.day input[type="checkbox"]');
const dayInputs = document.querySelectorAll('.day input[type="number"]');
const btn = document.querySelector('#click');

btn.addEventListener('click', () => {
   dayChecks.forEach( input => { // Handles checkboxes
      if(input.checked){
         const elClass = input.parentElement.getAttribute('class');
         const allEls = document.querySelectorAll(`.${elClass}`);
         allEls.forEach( (el) => {
            el.querySelector('input[type="checkbox"]').setAttribute('checked', 'checked');
         });
      }
   });

   dayInputs.forEach( input => { // Handles Inputs
      if(input.value != ''){
         const value = input.value;
         const elClass = input.parentElement.getAttribute('class');
         const allEls = document.querySelectorAll(`.${elClass}`);
         allEls.forEach( (el) => {
            el.querySelector('input[type="number"]').value = value;
         });
      }
   });

});

.week {
         display: flex;
         flex-direction: row;
      }
      .day{
         padding: 20px;
      }

<button id='click'>Apply to All</button>

   <div class="week">
      <div class="day">
         <h2>Primeiro Dia</h2>
         <div class="peqAlmoco">
            <input type="checkbox" name="" value="">
            <input type="number" value="">
         </div>
         <div class="almoco">
            <input type="checkbox" name="" value="">
            <input type="number" value="">
         </div>
         <div class="jantar">
            <input type="checkbox" name="" value="">
            <input type="number" value="">
         </div>
      </div>

      <div class="day">
         <h2>Segundo Dia</h2>
         <div class="peqAlmoco">
            <input type="checkbox" name="" value="">
            <input type="number" value="">
         </div>
         <div class="almoco">
            <input type="checkbox" name="" value="">
            <input type="number" value="">
         </div>
         <div class="jantar">
            <input type="checkbox" name="" value="">
            <input type="number" value="">
         </div>
      </div>

      <div class="day">
         <h2>Terçeiro Dia</h2>
         <div class="peqAlmoco">
            <input type="checkbox" name="" value="">
            <input type="number" value="">
         </div>
         <div class="almoco">
            <input type="checkbox" name="" value="">
            <input type="number" value="">
         </div>
         <div class="jantar">
            <input type="checkbox" name="" value="">
            <input type="number" value="">
         </div>
      </div>

   </div>