《 返回详情内容

javascript 多个复选框 选中一个,其他复选框禁用如何实现

4392次阅读  发表于2023-08-03 来源于金宣助手

javascript 多个复选框 选中一个,其他复选框禁用如何实现
实现javascript多个复选框中选中一个后,其他复选框禁用的方法有很多种。我将为你提供一种常见的实现方式。 首先,你需要给每个复选框添加一个相同的类或者共同的父元素,这样可以方便通过选择器获取到这些复选框。假设你给它们添加了一个名为"checkbox"的类。 然后,你可以使用以下代码来实现选中一个复选框后禁用其他复选框: ```javascript // 获取所有的复选框元素 var checkboxes = document.querySelectorAll(".checkbox"); // 遍历复选框元素 for (var i = 0; i < checkboxes.length; i++) { // 添加点击事件监听器 checkboxes[i].addEventListener("click", function() { // 检查当前复选框是否被选中 if (this.checked) { // 禁用其他复选框 for (var j = 0; j < checkboxes.length; j++) { if (checkboxes[j] !== this) { checkboxes[j].disabled = true; } } } else { // 启用其他复选框 for (var j = 0; j < checkboxes.length; j++) { if (checkboxes[j] !== this) { checkboxes[j].disabled = false; } } } }); } ``` 上述代码会为每个复选框元素添加一个点击事件监听器,当复选框被选中时,通过遍历其他的复选框元素将它们禁用(除了当前被选中的复选框),反之则启用其他复选框。 希望这个方法能够帮助到你。如果还有其他问题,请随时提问。


本网转载内容版权归原作者和授权发表网站所有,仅供学习交流之用,如有涉及版权问题,请通知我们尽快处理。