一键选中所有复选框并取消选中它们
[英]one button to check all check boxes and un check them too
问题描述
我有 3 个复选框和一个按钮，所以当我单击此按钮时，所有必须选中，如果我再次单击，则所有必须取消选中，但它不起作用
const btn={
btn: null,
check: function(checked = true) {
const checkboxes = document.querySelectorAll('input[name="cb"]');
checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
},
checkAll: function() {
this.check();
this.onclick = uncheckAll;
},
uncheckAll: function() {
this.check(false);
this.onclick = checkAll;
},
}
btn.check();
这是 HTML 文件：
<body style="background-color: #0d1117; color: #6D859E">
<div style="margin: 60px;">
<button id="btn">Check / Uncheck All</button>
<ul style="list-style-type: none; padding: 0">
<li>
<label for="c1"><input type="checkbox" name="cb" value="1" id="c1">1</label>
</li>
<li>
<label for="c2"><input type="checkbox" name="cb" value="2" id="c2">2</label>
</li>
<li>
<label for="c3"> <input type="checkbox" name="cb" value="3" id="c3">3</label>
</li>
</ul>
</div>
</body>
1 个解决方案
解决方案1
0 2022-08-12 22:42:15
此按钮将选中所有框，除非已选中所有框，在这种情况下，将取消选中所有框。
const $ = s => document.querySelector(s); const $$ = s => [...document.querySelectorAll(s)]; const checkboxes = $$('input[name="cb"]'); const btn = $("#btn"); function areAllChecked() { return checkboxes.every(checkbox => checkbox.checked); } function checkAll() { checkboxes.forEach(checkbox => checkbox.checked = true); } function uncheckAll() { checkboxes.forEach(checkbox => checkbox.checked = false); } function handleButtonClick(event) { if (areAllChecked()) uncheckAll(); else checkAll(); } btn.addEventListener("click", handleButtonClick);
<body style="background-color: #0d1117; color: #6D859E"> <div style="margin: 60px;"> <button id="btn">Check / Uncheck All</button> <ul style="list-style-type: none; padding: 0"> <li> <label for="c1"><input type="checkbox" name="cb" value="1" id="c1">1</label> </li> <li> <label for="c2"><input type="checkbox" name="cb" value="2" id="c2">2</label> </li> <li> <label for="c3"> <input type="checkbox" name="cb" value="3" id="c3">3</label> </li> </ul> </div> </body>
jQuery按钮检查所有复选框问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.