jquery实现CheckBox多选项全选与取消全选
封面图
•
2025-12-29
•
jQuery
242
0
0
0
在 jQuery 中实现 **CheckBox 多选项的全选与取消全选** 功能,可以通过以下步骤实现: --- ## ✅ 实现目标: - 一个“全选”复选框(`#selectAll`) - 若干个普通复选框(如:`.item`) - 点击“全选”时,所有普通复选框被选中 / 取消选中 - 点击普通复选框时,若全部选中,则自动勾选“全选”;否则取消“全选” --- ## 📦 HTML 示例代码: ```html <input type="checkbox" id="selectAll"> 全选 <br><br> <input type="checkbox" class="item" value="1"> 选项1 <input type="checkbox" class="item" value="2"> 选项2 <input type="checkbox" class="item" value="3"> 选项3 <input type="checkbox" class="item" value="4"> 选项4 ``` --- ## 💻 jQuery 实现代码: ```javascript $(document).ready(function () { // 全选按钮点击事件 $('#selectAll').click(function () { var isChecked = $(this).is(':checked'); $('.item').prop('checked', isChecked); }); // 普通复选框点击事件 $('.item').click(function () { // 判断是否所有项都被选中 if ($('.item:checked').length === $('.item').length) { $('#selectAll').prop('checked', true); } else { $('#selectAll').prop('checked', false); } }); }); ``` --- ## 🔍 说明: - `$('#selectAll').click(...)`:当“全选”按钮被点击时,将所有 `.item` 的 `checked` 属性设置为和“全选”一致。 - `$('.item').click(...)`:当任何一个普通复选框被点击时,检查是否所有都选中,从而控制“全选”按钮的状态。 --- ## 🔄 扩展功能(可选): 如果你想让“全选”按钮在页面加载时根据当前状态同步显示,可以加一句: ```javascript // 页面加载时初始化全选按钮状态 $('#selectAll').prop('checked', $('.item:checked').length === $('.item').length); ``` --- ## ✅ 总结 这个方法使用了 jQuery 的 `.prop()` 和 `.is()` 方法来操作复选框的状态,逻辑清晰、易于维护。你可以根据需要扩展成更复杂的多级选择逻辑(比如按条件筛选等)。如果你有更多需求,欢迎继续提问!
上一篇:
用js编解码base64
下一篇:
javascript 页面后退并刷新
标题录入,一次不能超过6条
留言
评论