複数のリストでチェックボックスを選択/選択解除する

リスト内のチェックボックスを選択/選択解除できる別のプログラマーの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

複数のリストでチェックボックスを選択/選択解除する

答えて

関連する問題