javascript启用单击时禁用复选框并一次只选择一个
[英]javascript enable disabled checkbox on click and select only one at a time
问题描述
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>
3 个解决方案
解决方案1
5 已采纳 2011-12-15 03:02:13
解决方案2
2 2011-12-15 02:57:42
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 所说的那样解决这个问题，另一个选项是“以上都不是”。
解决方案3
1 2011-12-15 02:55:10
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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.