checkbox全选、反选、单选（前端）_miniui复选框全选资源-CSDN文库

共4个文件

config：2个

js：1个

html：1个

需积分: 29 128 浏览量 2018-01-26 16:22:52 上传评论 1 收藏 25KB RAR 举报

在前端开发中，复选框（Checkbox）是用户界面中常用的一种组件，常用于实现多选功能。在本文中，我们将深入探讨如何实现"全选、反选、单选"的功能，特别是在存在一级类别和二级类别的场景下。我们要理解`checkbox`的基本用法。`checkbox`在HTML中通过`<input type="checkbox">`标签创建，它有一个`checked`属性，用于表示复选框是否被选中。例如： ```html <input type="checkbox" id="selectAll"> ``` 对于一级类别中的"全选"和"反选"功能，我们需要一个主复选框来控制所有二级类别的选中状态。当用户点击这个主复选框时，所有二级复选框的`checked`属性都需要相应地被设置为`true`或`false`。这可以通过JavaScript事件监听来实现，例如使用`addEventListener('change')`监听`click`事件： ```javascript document.getElementById('selectAll').addEventListener('change', function() { var checkboxes = document.querySelectorAll('.sub-checkbox'); // 获取所有二级复选框 for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = this.checked; } }); ``` 接下来，我们需要处理二级类别中的单选功能。在这种情况下，每个二级类别可能有一组复选框，用户只能选择其中的一个。我们可以利用`radio`按钮来实现这个功能，但这里我们仍使用`checkbox`，并通过JavaScript来限制只能单选。我们为每个二级类别分配一个唯一的分组名，并监听`change`事件： ```html <input type="checkbox" class="sub-checkbox" name="group1"> <input type="checkbox" class="sub-checkbox" name="group1"> ``` ```javascript document.addEventListener('change', function(event) { if (event.target.type === 'checkbox' && event.target.classList.contains('sub-checkbox')) { var groupName = event.target.name; var groupCheckboxes = document.getElementsByName(groupName); for (var i = 0; i < groupCheckboxes.length; i++) { groupCheckboxes[i].checked = false; } event.target.checked = true; } }); ``` 我们需要确保一级类别的全选复选框的状态能正确反映二级类别的选中情况。当所有二级类别的复选框都未被选中时，一级复选框应自动变为未选中状态。这可以通过遍历所有二级复选框并检查它们的`checked`属性来实现： ```javascript function updateSelectAllStatus() { var allChecked = Array.from(document.getElementsByClassName('sub-checkbox')) .every(checkbox => !checkbox.checked); document.getElementById('selectAll').checked = !allChecked; } // 监听所有二级复选框的变化 document.addEventListener('change', updateSelectAllStatus); ``` 总结起来，实现"checkbox全选、反选、单选"功能，主要涉及HTML的`<input type="checkbox">`标签、JavaScript事件监听以及状态同步。通过合理的事件处理和状态更新，我们可以为用户提供直观且易用的多级复选功能。在实际项目中，可以结合现代前端框架如React、Vue或Angular进行更高效和可维护的实现。

资源推荐

资源详情

资源评论

收起资源包目录

checkbox.rar （4个子文件）

checkbox

jquery.js 69KB

Web.Debug.config 1KB

Web.config 358B

test.html 4KB

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>复选框</title> <script src="js/jquery.js"></script> <script type="text/javascript"> //全选和反选 function ChangeBox(index) { $("input[id^='study_" + index + "']").each(function () { if (this.checked) { $("input[name^='checkbox_" + index + "']").each(function () { this.checked = true; }) } else { $("input[name^='checkbox_" + index + "']").each(function () { this.checked = false; }) $("input[id^='study_" + index + "']").each(function () { this.checked = false; }) } }) } //单选（单选框都没有勾选，则大类勾选框为false） function ChangeCheck(index) { $("input[name^='checkbox_" + index + "']").each(function () { if (this.checked) { $("input[id^='study_" + index + "']").each(function () { this.checked = true; }) } else { var len = $("input[name^='checkbox_" + index + "']:checked").length - 1; if (len == 0) { $("input[id^='study_" + index + "']").each(function () { this.checked = false; }) } } }) } //保存所有勾选框的ID值 function Save() { var str = ""; //此段代码获取所有勾选的value值（value里面放具体ID指） $("input[type^='checkbox']:checked").each(function () { if (this.checked = true) { str += $(this).val() + ","; } }) alert(str); } </script> </head> <body> <table> <tr> <td><input type="checkbox" name="checkbox_1" id="study_1" value="1" onclick="ChangeBox(1)" />学习</td> </tr> <tr> <td><input type="checkbox" name="checkbox_1" onclick="ChangeCheck(1)" value="101" />.Net</td> <td><input type="checkbox" name="checkbox_1" onclick="ChangeCheck(1)" value="102" />.Java</td> <td><input type="checkbox" name="checkbox_1" onclick="ChangeCheck(1)" value="103" />.Html</td> <td><input type="checkbox" name="checkbox_1" onclick="ChangeCheck(1)" value="104" />.Div+Css</td> </tr> <tr> <td><input type="checkbox" name="checkbox_2" id="study_2" value="2" onclick="ChangeBox(2)" />娱乐</td> </tr> <tr> <td><input type="checkbox" name="checkbox_2" onclick="ChangeCheck(2)" value="201" />KTV</td> <td><input type="checkbox" name="checkbox_2" onclick="ChangeCheck(2)" value="202" />桑拿</td> <td><input type="checkbox" name="checkbox_2" onclick="ChangeCheck(2)" value="203" />洗脚</td> <td><input type="checkbox" name="checkbox_2" onclick="ChangeCheck(2)" value="204" />撞球</td> </tr> <tr> <td><input type="checkbox" name="checkbox_3" id="study_3" value="3" onclick="ChangeBox(3)" />酒水</td> </tr> <tr> <td><input type="checkbox" name="checkbox_3" onclick="ChangeCheck(3)" value="301" />人头马</td> <td><input type="checkbox" name="checkbox_3" onclick="ChangeCheck(3)" value="302" />二锅头</td> <td><input type="checkbox" name="checkbox_3" onclick="ChangeCheck(3)" value="303" />蒙倒驴</td> <td><input type="checkbox" name="checkbox_3" onclick="ChangeCheck(3)" value="304" />啤酒</td> </tr> <tr> <td><input type="button" value="保存" onclick="Save()" /></td> </tr> </table> </body> </html>

评论收藏

内容反馈