javascript在点击时启用禁用复选框，一次只选择一个答案

【问题标题】：javascript enable disabled checkbox on click and select only one at a timejavascript在点击时启用禁用复选框，一次只选择一个
【发布时间】：2011-12-15 02:47:52
【问题描述】：

我正在动态生成带有 chkBox100 等 id 和 onClick 函数的复选框。

我想做的是

一次只能选择一个复选框。
如果选中了前一个复选框并选中了另一个复选框，则取消前一个复选框。
如果我点击选中的复选框，它应该取消它。

我想在没有 jquery 或任何其他库的标准 javascript 中执行此操作。

请帮助您的帮助，我们将不胜感激。到目前为止，这是我的代码。

<!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>

【问题讨论】：

我同意@gereeter。也许添加一个“无”选项来取消选择其他选项。
另外，表单控件必须有name属性，否则不能成功，提交表单时不会被包含。

标签： javascript dynamic checkbox toggle

【解决方案1】：

如果不使用库，我想您可以执行以下操作，如果我理解正确，它似乎可以工作。

Fiddle

【讨论】：

【解决方案2】：

您缺少的代码是取消选择其余部分的代码。为此，您应该首先获取所有复选框的列表，然后取消选择所有复选框。然后，选择用户点击的那个。

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
    }
}

这样做的另一种方法是使用单选按钮，它会自动具有您想要的前两个属性，但不是第三个，尽管您可以像 RobG 所说的那样解决这个问题，另一个选项是“以上都不是”。

【讨论】：

如果复选框被选中并且单击取消选中它，那么 isChecked 将为 false 并且您的代码将重新选中它（即无法取消选中该复选框）。最后一行应该是 'chkBox.checked = isChecked;`。顺便说一句，如果 isChecked 为 false，则无需执行任何操作。

【解决方案3】：

您是否考虑过使用带有默认选中按钮的单选按钮，该按钮实际上是“无选择”选项？无需 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

【讨论】：

感谢您的帮助和时间。