在前端开发中，经常会遇到需要对多个复选框进行操作的场景，而有时候需要重置所有复选框的状态。本文将介绍如何使用 jQuery 或纯 JS 实现重置所有复选框的功能。
使用 jQuery 重置所有复选框
如果你的项目中已经使用了 jQuery 库，那么可以通过以下代码来重置所有复选框：
$('input[type="checkbox"]').prop('checked', false);
上述代码会选择所有 input 类型为 checkbox 的元素，并将它们的 checked 属性设置为 false，从而重置它们的状态。
如果你想重置指定的一组复选框（例如具有相同 class 或 data-* 属性的一组复选框），也可以使用类似如下的代码：
$('.my-checkboxes').prop('checked', false); // 重置具有 my-checkboxes 类的所有复选框 $('[data-reset="true"]').prop('checked', false); // 重置所有具有 data-reset="true" 属性的复选框
使用纯 JS 重置所有复选框
如果你不希望依赖 jQuery 库，也可以使用原生的 JS 代码来实现重置所有复选框的功能。
首先，需要获取所有的复选框元素。你可以使用 document.querySelectorAll() 方法来获取符合条件的元素列表：
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
然后，可以通过遍历列表并设置 checked 属性为 false 来重置所有复选框的状态：
for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; }
示例代码
下面是一个示例页面，包含了 jQuery 和纯 JS 两种方法的演示：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------------- ------- ----------------------------------------------------------- ------- ------ ---------------- ---------- -------------------- ------ --------------- ---------- ----------------- -- --------------- ------ ------ --------------- ------------ ------------- -------- ------ ------ --------------- ------------ -------------- -------- ------ ------ --------------- ------------ -------------- -------- ------ ------ --------------- ------------ ------------- -------- ------ ------ --------------- ------------ ------------------ -------- ------ ------- -------- -- -- ------ -- ----------------------------------- - ------------------------------------------- ------- --- -- --- -- -- ------------------------------------------------------------- ---------- - --- ---------- - ---------------------------------------------------- --- ---- - - -- - - ------------------ ---- - --------------------- - ------ - --- --------- ------- -------展开代码
在上述示例中，我们创建了一个包含多个复选框的表单，并添加了两个按钮来分别演示使用 jQuery 和纯 JS 重置所有复选框的功能。你可以将代码保存为 HTML 文件，并在浏览器中打开以查看效果。
总结
在前端开发中，重置所有复选框的状态是一个常见的需求。本文介绍了如何使用 jQuery 或纯 JS 实现这一功能，希望能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13709
