jQuery实现复选框全选和取消全选功能

作者：System 时间：2024年08月09日分类：所有,jquery 字数：1277

这篇文章距离上次修改已过278天，其中的内容可能已经有所变动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox Select/Deselect All Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div>
    <input type="checkbox" id="selectAll"> Select All
    <div>
        <input type="checkbox" class="item"> Item 1<br>
        <input type="checkbox" class="item"> Item 2<br>
        <input type="checkbox" class="item"> Item 3<br>
        <input type="checkbox" class="item"> Item 4<br>
        <!-- More checkboxes if needed -->
    </div>
</div>

<script>
    $(document).ready(function() {
        $('#selectAll').click(function() {
            // Check or uncheck all checkboxes
            $('.item').prop('checked', this.checked);
        });

        // Check all checkboxes when any .item is checked
        $('.item').click(function() {
            $('#selectAll').prop('checked', $('.item:checked').length === $('.item').length);
        });
    });
</script>

</body>
</html>

这段代码使用jQuery实现了复选框的全选和取消全选功能。当用户点击"Select All"复选框时，所有".item"类的复选框会根据"Select All"复选框的状态进行全选或取消全选。同时，当用户手动选择任意一个".item"类的复选框时，"Select All"复选框的状态会更新，如果所有".item"类的复选框都被选中，则"Select All"复选框也会被选中；如果任何一个".item"类的复选框未被选中，则"Select All"复选框都不会被选中。

jQuery实现复选框全选和取消全选功能

评论已关闭

推荐阅读