一、什么是复选框和单选框
复选框和单选框是HTML表单中两种常见的输入控件，复选框允许用户选择一个或多个选项，而单选框只允许用户选择一个选项。
<input type="checkbox" name="option" value="1">Option 1</input>
<input type="checkbox" name="option" value="2">Option 2</input>
<input type="checkbox" name="option" value="3">Option 3</input>
<input type="radio" name="option" value="1">Option 1</input>
<input type="radio" name="option" value="2">Option 2</input>
<input type="radio" name="option" value="3">Option 3</input>
二、让复选框只能单选的方法
1. JavaScript
使用JavaScript可以通过监听复选框的点击事件，来实现只能单选的效果。
<script>
var checkboxes = document.getElementsByName('option');
function uncheckAll() {
for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].checked = false;
}
}
for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].addEventListener('click', function() {
uncheckAll();
this.checked = true;
});
}
</script>
该代码片段中，首先获取所有的name为option的复选框，然后通过循环为每个复选框添加点击事件监听器。事件处理函数中先调用uncheckAll函数将所有复选框都取消选中，再将当前复选框选中。
2. HTML
在HTML中，可以使用radio类型的input标签来实现只能单选的效果。将所有复选框的type修改为radio，并为每个复选框设置相同的name属性即可。
<input type="radio" name="option" value="1">Option 1</input>
<input type="radio" name="option" value="2">Option 2</input>
<input type="radio" name="option" value="3">Option 3</input>
三、小结
无论是使用JavaScript还是HTML，在实现复选框只能单选时，都需要为所有复选框设置相同的name属性，在JavaScript中需要通过监听点击事件来实现，而在HTML中可以直接使用radio类型的input标签。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/253996.html
微信扫一扫 
支付宝扫一扫 