Aktivieren/Deaktivieren von Kontrollkästchen in mehreren Listen

Ich habe ein Jquery-Skript von einem anderen Programmierer, mit dem ich Kontrollkästchen in einer Liste aktivieren/deaktivieren kann. Es funktioniert gut mit einer einzelnen Liste, aber ich möchte in der Lage sein, mehr Listen auf der Seite zu haben. Ich weiß nicht, wie ich das machen soll.Aktivieren/Deaktivieren von Kontrollkästchen in mehreren Listen

Wenn alle Unterthemen markiert sind, wird der Hauptpunkt automatisch überprüft. Ich möchte nur wissen, wie es funktioniert, damit alle Listen unabhängig voneinander sind.

ist der Code hier: 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>

Quelle

2016-08-28 Matt

Probieren Sie es aus:

$(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); 

     } 
    }) 
})

Schlusscode:

<!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>

Quelle

2016-08-28 21:15:42 Ehsan

Aktivieren/Deaktivieren von Kontrollkästchen in mehreren Listen

Antwort

Verwandte Themen