HTML复选框用于从列表中选取多个项目，并允许使用单一选择的HTML单选按钮。
有时需要使用复选框而不是单选按钮来进行单一选择。
在本教程中，我展示了如何使用jQuery和JavaScript只允许一个复选框选择。
1.使 用jQuery
HTML
创建多个复选框并在所有复选框中添加class="checkoption" 。
jQuery
- 在
checkoption类上定义click事件。 - 设置所有的复选框
checked属性为false，除了被点击的复选框。
完成的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Allow Only One Checkbox to be Checked using jQuery and JavaScript</title>
</head>
<body>
<input type="checkbox" class="checkoption" value="1" onclick="checkedOnClick(this);"> Option1 <br>
<input type="checkbox" class="checkoption" value="2" onclick="checkedOnClick(this);"> Option2 <br>
<input type="checkbox" class="checkoption" value="3" onclick="checkedOnClick(this);"> Option3 <br>
<input type="checkbox" class="checkoption" value="4" onclick="checkedOnClick(this);"> Option4 <br>
<input type="checkbox" class="checkoption" value="5" onclick="checkedOnClick(this);"> Option5 <br>
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.checkoption').click(function() {
$('.checkoption').not(this).prop('checked', false);
});
});
</script>
</body>
</html>
2.使 用JavaScript
HTML
创建多个复选框，并为所有复选框添加class="checkoption" 。在复选框上定义onclick 事件，调用checkedOnClick(this); 。
脚本
- 创建
checkedOnClick()函数。 - 选择所有的复选框，其中
class="checkoption"，并将其分配给checkboxesList变量。 - 在
checkboxesList上循环，并将checked属性设置为false。 - 将被点击的复选框
checked属性设置为true。
完成代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Allow Only One Checkbox to be Checked using jQuery and JavaScript</title>
</head>
<body>
<input type="checkbox" class="checkoption" value="1" onclick="checkedOnClick(this);"> Option1 <br>
<input type="checkbox" class="checkoption" value="2" onclick="checkedOnClick(this);"> Option2 <br>
<input type="checkbox" class="checkoption" value="3" onclick="checkedOnClick(this);"> Option3 <br>
<input type="checkbox" class="checkoption" value="4" onclick="checkedOnClick(this);"> Option4 <br>
<input type="checkbox" class="checkoption" value="5" onclick="checkedOnClick(this);"> Option5 <br>
<!-- Script -->
<script type="text/javascript">
function checkedOnClick(el){
// Select all checkboxes by class
var checkboxesList = document.getElementsByClassName("checkoption");
for (var i = 0; i < checkboxesList.length; i++) {
checkboxesList.item(i).checked = false; // Uncheck all checkboxes
}
el.checked = true; // Checked clicked checkbox
}
</script>
</body>
</html>
3.总 结
你可以使用上述任何一种方法，只允许从复选框组中选择一个复选框。
如果你觉得这个教程有帮助，那么别忘了分享。
