選擇/取消選擇多個列表中的複選框

我有另一位程序員的Jquery腳本，允許我在列表中選擇/取消選擇複選框。它對單個列表非常有用，但我希望能夠在頁面上顯示更多列表。我不知道該怎麼做。選擇/取消選擇多個列表中的複選框

當檢查所有子主題時，主點也會自動檢查。我想知道的是如何讓它工作，以便所有列表都相互獨立。

的代碼是在這裏： https://codepen.io/matthains/pen/akZGRv

<ul><!-- First topic here --> 
    <li><input type="checkbox" id="select_all"/> Main Point is here</li> 
    <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 1</li> 
    <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 2</li> 
    <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 3</li> 
</ul> 

<ul><!-- Second topic here --> 
    <li><input type="checkbox" id="select_all"/> 2nd Main Point is here</li> 
    <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 1</li> 
    <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 2</li> 
    <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 3</li> 
</ul>

來源

2016-08-28 Matt

試試：

$(document).ready(function(){ 

    $("#select_all_part1").on("change", function() { 
     $(this).closest("ul").find(".checkbox").prop("checked",$(this).prop("checked")); 
    }) 


    $("#select_all_part2").on("change", function() { 
     $(this).closest("ul").find(".checkbox").prop("checked",$(this).prop("checked")); 
    }) 

    $(".checkbox").on("change",function(){ 
     if (!$(this).prop("checked")) { 
      $(this).closest("ul").find("input:first").prop("checked",false); 
     } 
     else { 
      $len = $(this).closest("ul").find(".checkbox:checked").length; 
      if($len == 3) 
       $(this).closest("ul").find("input:first").prop("checked",true); 

     } 
    }) 
})

最終代碼：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 
      li { 
 
       list-style: none; 
 
       } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <ul><!-- First topic here --> 
 
      <li><input type="checkbox" id="select_all_part1"/> Main Point is here</li> 
 
      <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 1</li> 
 
      <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 2</li> 
 
      <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 3</li> 
 
     </ul> 
 

 
     <ul><!-- Second topic here --> 
 
       <li><input type="checkbox" id="select_all_part2"/> 2nd Main Point is here</li> 
 
       <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 1</li> 
 
       <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 2</li> 
 
       <li><input class="checkbox" type="checkbox" name="check[]">Subpoint 3</li> 
 
     </ul> 
 
     
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function(){ 
 

 
     $("#select_all_part1").on("change", function() { 
 
      $(this).closest("ul").find(".checkbox").prop("checked",$(this).prop("checked")); 
 
     }) 
 

 

 
     $("#select_all_part2").on("change", function() { 
 
      $(this).closest("ul").find(".checkbox").prop("checked",$(this).prop("checked")); 
 
     }) 
 

 
     $(".checkbox").on("change",function(){ 
 
      if (!$(this).prop("checked")) { 
 
       $(this).closest("ul").find("input:first").prop("checked",false); 
 
      } 
 
      else { 
 
       $len = $(this).closest("ul").find(".checkbox:checked").length; 
 
       if($len == 3) 
 
        $(this).closest("ul").find("input:first").prop("checked",true); 
 

 
        } 
 
       }) 
 
      }) 
 
    </script> 
 
    </body> 
 
</html>

來源

2016-08-28 21:15:42 Ehsan

選擇/取消選擇多個列表中的複選框

回答

相關問題