Verwendung von jquery check/disable Markieren Sie CheckboxAlle, wenn alle Checkboxen in der Gruppe aktiviert/deaktiviert sind

Question

Ich brauche SelectAll Checkbox sollte aktiviert sein, wenn alle li 's in den Gruppen Checkboxen markiert sind.

Hier habe ich zwei Kontrollkästchen Gruppen. Ich brauche optimierten Code. versuchen Sie, zwei IDs zusammen zu arbeiten?

Hinweis: Wenn alle li 's aktiviert/deaktiviert sind, sollte die andere Gruppe nicht betroffen sein und umgekehrt.

haben Sie einen Blick auf

<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

viele Möglichkeiten gibt es, dies zu tun. Ich schlage vor, .is() zu verwenden, wenn Sie überprüfen möchten, ob ein Element aktiviert ist oder nicht.

Teilen Sie auch Ihre Arbeit ein wenig auf. Überprüfen Sie eins und zwei. Ich würde dir nicht vorschlagen, dass du versuchst, sie zusammen zu banken.

Arbeitsbeispiel: 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); 
    } 

    }); 
});