jq实现复选框的全选、全不选和子复选框控制全选按钮

更新于 2月20日  约 3 分钟

今天做了一个功能,对复选框的全选全不选和子元素控制全选按钮的选择。可能有点绕口,我直接上截图和代码:
效果.gif

<!DOCTYPE html>
<html lang="en">
<script src="jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="checkbox" name="choose1" id="checkboxInput" />
    <label for="checkboxInput">全选</label>
    <div class="" id="main">
        <input type="checkbox" name="choose" value="" />
        <input type="checkbox" name="choose" value="" />
        <input type="checkbox" name="choose" value="" />
    </div>
    <script type="text/javascript">
        // 全选反选
        $("#checkboxInput").on("change", function () {
            if (this.checked) {
                $("#main").find("input[name='choose']").prop("checked", true);
            } else {
                $("#main").find("input[name='choose']").prop("checked", false);
            }
        });
        // 控制全选按钮是否被选中
        $("#main input").on("change", function () {
            var inputLength = $("#main input").length;
            var checkedLength = $('[name=choose]:checked').length;
            if (checkedLength == inputLength) {
                $("#checkboxInput").prop("checked", true);
            } else {
                $("#checkboxInput").prop("checked", false);
            }
        });
    </script>
</body>
</html>

因为网上有很多类似的功能,所以我也参照了很多前辈们的代码。现在是能实现我工作中的需求的,希望能帮到有需要的朋友,如果写的有问题,也希望朋友能够指出来,一起进步。

阅读 217更新于 2月20日

推荐阅读
目录