하나 이상의 목록에서 확인란을 선택/선택 취소

다른 프로그래머의 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

하나 이상의 목록에서 확인란을 선택/선택 취소

답변

관련 문제