javascript javascript启用单击时禁用复选框并一次只选择一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8514511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript enable disabled checkbox on click and select only one at a time
提问by Nomad
I am dynamically generating checkboxes with id like chkBox100 etc and with onClick function.
我正在动态生成带有 chkBox100 等 id 和 onClick 函数的复选框。
What I want to do is
我想做的是
- Only select one checkbox at a time.
- If a previous checkbox is checked and another checkbox is check, deslect the previous one.
- If I click on the selected checkbox, it should deslect it.
- 一次只选择一个复选框。
- 如果选中了前一个复选框并选中了另一个复选框，请取消选择前一个。
- 如果我单击选定的复选框，它应该取消选中它。
I want to do it in standard javascript without jquery or any other library.
我想在没有 jquery 或任何其他库的标准 javascript 中做到这一点。
Please help your help will be appreciated. Here's my code so far.
请帮助您的帮助将不胜感激。到目前为止，这是我的代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function toggle(chkBox)
{
if (chkBox.checked)
{
chkBox.checked = false;
}
else
{
chkBox.checked = true;
}
// only select one at a time.
}
</script>
</head>
<body>
<form id="myForm" name="myForm">
<input type="checkbox" id="chkBox100" onClick="toggle(this);">
<input type="checkbox" id="chkBox121" onClick="toggle(this);">
<input type="checkbox" id="chkBox1180" onClick="toggle(this);">
</form>
</body>
</html>
回答by mreyeros
回答by gereeter
The code you are missing is the code that will deselect the rest. To do this, you should first get a list of all the check boxes, and deselect all of them. Then, select the one the user clicked on.
您缺少的代码是将取消选择其余部分的代码。为此，您应该首先获得所有复选框的列表，然后取消选择所有复选框。然后，选择用户单击的那个。
function toggle(chkBox) {
checkboxes = document.getElementById("myForm").childNodes;
var isChecked = chkBox.checked; //this just changed, so it really is whether the box wasn't checked beforehand.
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false; //clear all of them
}
if (isChecked) {
chkBox.checked = true; //if the original one wasn't checked, check it
}
}
An alternative to doing this is to use radio buttons, which automatically have the first two properties you want, but not the third, although you could fix this like RobG said, with another option saying "None of the above."
执行此操作的另一种方法是使用单选按钮，它会自动具有您想要的前两个属性，而不是第三个，尽管您可以像 RobG 所说的那样解决这个问题，另一个选项是“以上都不是”。
回答by RobG
Have you considered using radio buttons with a default checked button that is effectively the "no choice" option? No javascript required.
您是否考虑过使用带有默认选中按钮的单选按钮，这实际上是“无选择”选项？不需要javascript。
<input type="radio" name="rb" value="zero">Zero
<br>
<input type="radio" name="rb" value="one">One
<br>
<input type="radio" name="rb" value="two">Two
<br>
<input type="radio" name="rb" value="None" checked>None of the above
