当选中/取消选中组中的所有复选框时，使用jquery选中/取消选中全选复选框

Question

当检查组复选框中的所有SelectAll时，我需要检查li复选框。

这里我有两个复选框组。我需要优化的代码。尝试合二工作两个ID？

注意：如果选中/取消选中所有li，则其他组不应受到影响，反之亦然。

请看看my work till now

    <ul>
            <li><input type="checkbox" id="one_select_all"/> Group ONE Selecct All</li>
            <li><input class="one_checkbox" type="checkbox" name="check[]"> This is Item 1</li>
            <li><input class="one_checkbox" type="checkbox" name="check[]"> This is Item 2</li>
            <li><input class="one_checkbox" type="checkbox" name="check[]"> This is Item 3</li>
            <li><input class="one_checkbox" type="checkbox" name="check[]"> This is Item 4</li>
            <li><input class="one_checkbox" type="checkbox" name="check[]"> This is Item 5</li>
            <li><input class="one_checkbox" type="checkbox" name="check[]"> This is Item 6</li>
    </ul>
    <ul>
            <li><input type="checkbox" id="two_select_all"/> Group TWO Selecct All</li>
            <li><input class="two_checkbox" type="checkbox" name="check[]"> This is Item 1</li>
            <li><input class="two_checkbox" type="checkbox" name="check[]"> This is Item 2</li>
            <li><input class="two_checkbox" type="checkbox" name="check[]"> This is Item 3</li>
            <li><input class="two_checkbox" type="checkbox" name="check[]"> This is Item 4</li>
            <li><input class="two_checkbox" type="checkbox" name="check[]"> This is Item 5</li>
            <li><input class="two_checkbox" type="checkbox" name="check[]"> This is Item 6</li>
   </ul>     


        <script>
        $("#one_select_all").change(function(){
            $(".one_checkbox").prop('checked', $(this).prop("checked"));
        });
        $("#two_select_all").change(function(){
            $(".two_checkbox").prop('checked', $(this).prop("checked")); 
        });
        $('.one_checkbox , .two_checkbox').change(function(){ 
            if(false == $(this).prop("checked")){ 
                $("#one_select_all").prop('checked', false);
            }else{
            $("#one_select_all").prop('checked', true);
            }
            if ($('.one_checkbox:checked, .two_checkbox:checked').length == $('.one_checkbox, .two_checkbox').length ){
                $("#one_select_all, #two_select_all").prop('checked', true);
            }else{
             $("#one_select_all, #two_select_all").prop('checked', false);
            }
        });
        </script>

Answer 1

有很多方法可以做到这一点。我建议您在检查物品是否被检查时使用.is()。

另外，分开你的工作。检查一个然后两个。不建议你尝试将它们放在一起。

工作示例：https://jsfiddle.net/Twisty/awnxx4zL/2/

JavaScript的

$(function() {
  $("#one_select_all").change(function() { //"select all" change 
    $(".one_checkbox").prop('checked', $(this).prop("checked")); //change all ".checkbox" checked status
  });

  $("#two_select_all").change(function() { //"select all" change 
    $(".two_checkbox").prop('checked', $(this).prop("checked")); //change all ".checkbox" checked status
  });

  //".checkbox" change 
  $('.one_checkbox, .two_checkbox').change(function() {
    //uncheck "select all", if one of the listed checkbox item is unchecked
    if (!$(this).is("checked") && $(this).hasClass("one_checkbox")) {
      //if this item is unchecked
      $("#one_select_all").prop('checked', false);
      //change "select all" checked status to false
    }
    if ($('.one_checkbox:checked').length == $('.one_checkbox').length) {
      $("#one_select_all").prop('checked', true);
    }
    if (!$(this).is("checked") && $(this).hasClass("two_checkbox")) {
      //if this item is unchecked
      $("#two_select_all").prop('checked', false);
      //change "select all" checked status to false
    }
    if ($('.two_checkbox:checked').length == $('.two_checkbox').length) {
      $("#two_select_all").prop('checked', true);
    }

  });
});