Установите или снимите флажки в нескольких списках

У меня есть сценарий 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

Установите или снимите флажки в нескольких списках

ответ

Смежные вопросы