Question

我以这种方式记录餐食，如图所示：

我创建了全部应用按钮，该按钮用于在完成每月的1号后用相同的数据填充该月的其余天。例如：

我预包装了第一天：

通过点击全部应用按钮，以相同的方式填写剩余天数：

代码：

<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>

Answer 2

如果您想要一个优雅的JQuery实现，请尝试以下操作：

$(document).ready(function(){
    // used the first checkbox (input with the date class) to select each data column for entering data
    // this is the column you want replicated on other columns
    $('.date').change(function() {

        // inactivate every other column that is not this column
        $('.date').not($(this)).prop('checked', false).parents('td').removeClass('active');

        // show that this is the currently selected column
        $(this).parents('td').toggleClass('active');
    });

    // click handler for 'apply to all' button
    $('#elemento').click(function() {

        var checkboxstate = {}; // object to store all the checkbox state in the current column
        var numberstate = {}; // object to store content of all text input in the current column

        // for each input element in the active column
        $.each($('.active').find('input'), function(key, element){

            if($(this).prop('type') == 'checkbox') {

                // collect all checkbox state
                checkboxstate[element.name] = $(this).prop('checked');

            } else {

                // collect all input text content
                numberstate[element.name] = $(this).val();
            }
        });

        // for each checkbox or number
        $.each($('.checkbox, .number'), function(key, element) {
            // store these variables beforehand so you don't need to test for them in the inner each statement

            // for checkboxes
            var target = checkboxstate;
            var type = 'checkbox';
            var property = 'checked';

            // for number elements
            if($(this).is('.number')) {
                target = numberstate;
                type = 'number';
                property = 'value';
            }
            
            // assign object properties to dom elements with same type and name properties as that of the object property
            $.each(target, function(key_1, element_1) {
                if($(element).prop('type') == type && $(element).prop('name') == key_1) {
                    $(element).prop(property, element_1);
                }
            });
        });
        return false;
    });
});

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="index.js"></script>
        <title>My test doc</title>
        <style>
            table {
                border-collapse: collapse;
            }
            .active {
                background-color: #00ff00;
            }
            input {
                margin-bottom: 5px;
            }
            .checkbox-div {
                float: left;
            }
            .number-div {
                float: right;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <h3>welcome</h3>
        <form method="GET" action="#">
        <table style="border-collapse: collapse">
            <tr>
                <td>
                    <input class="date" type='checkbox' name='date' value='date'>Date 
                    <br/> 
                    <div class="checkbox-div">
                        <input type='checkbox' class='checkbox' name='Peq_Almoço' value='Peq_Almoço'>Peq. Almoço
                    </div>
                    <div class="number-div">
                        <input min='0' type='number' class='number' name='Peq_Almoço' value='' />
                    </div> 
                    <br/>
                    <div class="checkbox-div">
                        <input type='checkbox' class='checkbox' name='Almoço'  value='Almoço'>Almoço
                    </div>
                    <div class="number-div">
                        <input min='0' type='number' class='number' name='Almoço' value=''/>  
                    </div>
                    <br/>
                    <div class="checkbox-div">
                        <input type='checkbox' class='checkbox' name='Lanche'  value='Lanche'>Lanche
                    </div>
                    <div class="number-div">
                        <input min='0' type='number' class='number' name='Lanche' value=''/>  
                    </div>
                    <br/>
                </td>
                <td>
                    <input class="date" type='checkbox' name='date' value='date'>Date 
                    <br/> 
                    <div class="checkbox-div">
                        <input type='checkbox' class='checkbox' name='Peq_Almoço' value='Peq_Almoço'>Peq. Almoço
                    </div>
                    <div class="number-div">
                        <input min='0' type='number' class='number' name='Peq_Almoço' value='' />
                    </div> 
                    <br/>
                    <div class="checkbox-div">
                        <input type='checkbox' class='checkbox' name='Almoço'  value='Almoço'>Almoço
                    </div>
                    <div class="number-div">
                        <input min='0' type='number' class='number' name='Almoço' value=''/>  
                    </div>
                    <br/>
                    <div class="checkbox-div">
                        <input type='checkbox' class='checkbox' name='Lanche'  value='Lanche'>Lanche
                    </div>
                    <div class="number-div">
                        <input min='0' type='number' class='number' name='Lanche' value=''/>  
                    </div>
                    <br/>
                </td>
            </tr>
            <tr>
                <td>
                    <input class="date" type='checkbox' name='date' value='date'>Date 
                    <br/> 
                    <div class="checkbox-div">
                        <input type='checkbox' class='checkbox' name='Peq_Almoço' value='Peq_Almoço'>Peq. Almoço
                    </div>
                    <div class="number-div">
                        <input min='0' type='number' class='number' name='Peq_Almoço' value='' />
                    </div> 
                    <br/>
                    <div class="checkbox-div">
                        <input type='checkbox' class='checkbox' name='Almoço'  value='Almoço'>Almoço
                    </div>
                    <div class="number-div">
                        <input min='0' type='number' class='number' name='Almoço' value=''/>  
                    </div>
                    <br/>
                    <div class="checkbox-div">
                        <input type='checkbox' class='checkbox' name='Lanche'  value='Lanche'>Lanche
                    </div>
                    <div class="number-div">
                        <input min='0' type='number' class='number' name='Lanche' value=''/>  
                    </div>
                    <br/>
                </td>
            </tr>
        </table>

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

另请参阅小提琴示例here

在这里，每一列都由td元素表示。我将第一个复选框与date类一起使用，以选择我们希望其他列复制的列。

此外，复选框和数字输入是松散耦合的-也就是说，可以取消选中复选框并填充相应的数字输入，并且该复选框仍将复制到其他列上。

为了简洁起见，使用了三列。您可以根据需要创建任意多的列，并且jQuery脚本仍将无缝运行。

Answer 3

您的变量inputs是输入的集合，因此您必须检查forEach或loop中a的每个输入的状态。

与您要修改状态的其他输入相同。

代码：

$('#elemento').on('click', function(){
  var inputs = $('td > input');

  inputs.each(function(index, element){
    if(element.checked) {
       var children = $(element).parent().find('input[type="checkbox"]');

      children.each(function(i, child){
        $(child).prop('checked', true);
      });
    }
  });
});

Answer 4

您可以将类应用于每个复选框，然后单击全部应用于按钮

，选中所有复选框。

<input type="checkbox" class="Almoco" />

$('#elemento').on('click', function(){
   if(check for your condition if you need to apply check for all checkboxes)
   {
      $('.Almoco').prop('checked', true);
   } 
   //Similiarily check for other checkboxes
});

Answer 5

我能够通过以下方式解决向所有人申请的问题：

$('#elemento').click(function() {
  var checkedValues = Array(8).fill(false);
  var textValues = Array(7).fill('');
  var checkedStep = 0;
  var textStep = 0;
  $('tr').find('input[type="checkbox"]').each(function(index, value){
    if(index < 8){
      checkedValues[index] = $(this).prop("checked");
    }else{
      if(checkedStep == 8){
        checkedStep = 0;
      }
      $(this).prop('checked', checkedValues[checkedStep++]);
    }
  });
  $('tr').find('input[type="number"]').each(function(index, value){
    if(index < 7){
      textValues[index] = $(this).val();
    }else{
      if(textStep == 7){
        textStep = 0;
      }
      $(this).val(textValues[textStep++]);
    }
  });
});

复选框适用于所有人

5 个答案: