Javascript启用禁用复选框，单击，一次只选择一个

javascript enable disabled checkbox on click and select only one at a time

本文关键字：一次 选择 一个 启用 单击 Javascript 复选框      更新时间：2023-09-26

我动态生成复选框与id像chkBox100等和onClick功能。

我要做的是

  1. 一次只能选中一个复选框
  2. 如果前一个复选框被选中，另一个复选框被选中，则取消前一个复选框。
  3. 如果我点击选中的复选框，它应该取消选中。

我想在没有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>

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

小提琴

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

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说的那样修复这个问题，使用另一个选项说"以上皆非"。

您是否考虑过使用带有默认选中按钮的单选按钮，这实际上是"无选择"选项?不需要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
相关文章：