首页checkbox单选

checkbox单选

时间: 2023-12-10 16:35:45 浏览: 30

要实现checkbox的单选，可以通过JavaScript来实现。具体实现方法如下： 1.获取所有的checkbox元素，并为它们添加点击事件监听器。 2.在点击事件监听器中，遍历所有的checkbox元素，将它们的选中状态都设置为false，然后将当前点击的checkbox元素的选中状态设置为true。以下是一个示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox单选演示</title> </head> <body> <fieldset> <legend>checkbox单选演示</legend> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> </fieldset> <script> var checkboxes = document.getElementsByName("fruit"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener("click", function() { for (var j = 0; j < checkboxes.length; j++) { checkboxes[j].checked = false; } this.checked = true; }); } </script> </body> </html> ```