JavaScript启用点击复选框，并一次只选择一个

问题描述：

我动态生成与像chkBox100等id和onClick函数复选框。JavaScript启用点击复选框，并一次只选择一个

我想要做的就是

只有一次选择一个复选框。
如果选中前一个复选框，并选中另一个复选框，请选中前一个复选框。
如果我点击所选的复选框，它应该忽略它。

我想要在没有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 2011-12-15 02:50:37

我同意@gereeter。也许添加一个“无”选项来取消选择其他的。 – 2011-12-15 02:53:56

此外，表单控件必须具有名称属性，否则它们不能成功，并且在提交表单时不会包含它。 – RobG 2011-12-15 03:00:17

答

没有使用库，我想你可以做以下事情，如果我正确理解你的话，它似乎工作。

Fiddle

答

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

感谢您的帮助和时间。 – Nomad 2011-12-29 23:05:06

答

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

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启用点击复选框，并一次只选择一个

相关推荐