在多个列表中选择/取消选择复选框答案

【问题标题】：Select/Deselect checkboxes in more than one list在多个列表中选择/取消选择复选框
【发布时间】：2017-01-04 19:49:42
【问题描述】：

我有一个来自另一个程序员的 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>

【问题讨论】：

标签： jquery checklistbox

【解决方案1】：

试试看：

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

【讨论】：