Javascript 只选中一个复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6724064/
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
Only one selected checkbox
提问by Florin Fr?tic?
I have 15 check boxes in a form. This checkboxes are independent to eachother. I want a javascript function that makes, when user is selecting 2 checkboxes, the first checked box be unchecked and the second remain checked.
我在一个表单中有 15 个复选框。此复选框彼此独立。我想要一个 javascript 函数，当用户选择 2 个复选框时，第一个复选框被取消选中，第二个保持选中状态。
回答by John
Would you be better off using radio buttons instead of checkboxes as per this site: http://www.echoecho.com/htmlforms10.htm?
根据这个网站，你最好使用单选按钮而不是复选框：http: //www.echoecho.com/htmlforms10.htm？
If you want to use check boxes I guess you could do something like this:
如果您想使用复选框，我想您可以执行以下操作：
HTML Code:
HTML代码：
<input type="checkbox" id="Check1" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 1
<input type="checkbox" id="Check2" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 2
<input type="checkbox" id="Check3" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 3
<input type="checkbox" id="Check4" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 4
Javascript Code :
Javascript代码：
function selectOnlyThis(id) {
for (var i = 1;i <= 4; i++)
{
document.getElementById("Check" + i).checked = false;
}
document.getElementById(id).checked = true;
}
回答by Nisar
Check Fiddle
检查小提琴
- Give name of you checkboxs let 'myCheckbox'.
- On click of checkbox loop through all checkbox with name 'myCheckbox';
- make 'myCheckbox'
uncheck. - make Clicked Checkbox
checked.
- 给你的复选框的名字让'myCheckbox'。
- 单击复选框循环遍历所有名为“myCheckbox”的复选框；
- 制作 'myCheckbox'
uncheck。 - 制作 Clicked Checkbox
checked。
HTML
HTML
<input type="checkbox" name="myCheckbox" value="1" onclick="selectOnlyThis(this)" />
<input type="checkbox" name="myCheckbox" value="2" onclick="selectOnlyThis(this)"/>
<input type="checkbox" name="myCheckbox" value="3" onclick="selectOnlyThis(this)"/>
JavaScript
JavaScript
function selectOnlyThis(id){
var myCheckbox = document.getElementsByName("myCheckbox");
Array.prototype.forEach.call(myCheckbox,function(el){
el.checked = false;
});
id.checked = true;
}
回答by ThomasWeld
I created this CodePen off of John's answer, but I added the ability to uncheck all checkboxes.
我根据 John 的回答创建了这个 CodePen，但我添加了取消选中所有复选框的功能。
HTML:
HTML：
<br />
<br />
<div class="container">
<div class="field">
<p class="control">
<label class="checkbox">
<input type="checkbox" id="Check1" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 1
</label>
</p>
<p class="control">
<label class="checkbox">
<input type="checkbox" id="Check2" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 2
</label>
</p>
<p class="control">
<label class="checkbox">
<input type="checkbox" id="Check3" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 3
</label>
</p>
<p class="control">
<label class="checkbox">
<input type="checkbox" id="Check4" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 4
</label>
</p>
JavaScript:
JavaScript：
function selectOnlyThis(id) {
for (var i = 1;i <= 4; i++){
if ("Check" + i === id && document.getElementById("Check" + i).checked === true){
document.getElementById("Check" + i).checked = true;
} else {
document.getElementById("Check" + i).checked = false;
}
}
}
回答by darlinton
<html>
<head>
<title>FooBar</title>
<script language="javascript">
function checkOnly(stayChecked)
{
with(document.myForm)
{
for(i = 0; i < elements.length; i++)
{
if(elements[i].checked == true && elements[i].name != stayChecked.name)
{
elements[i].checked = false;
}
}
}
}
</script>
</head>
<body>
<form name="myForm">
<input type="checkbox" name="cb1" value="1" onclick="checkOnly(this)">
<input type="checkbox" name="cb2" value="1" onclick="checkOnly(this)">
<input type="checkbox" name="cb3" value="1" onclick="checkOnly(this)">
</form>
</body>
</html>
credits to: http://forums.devshed.com/html-programming-1/make-checkboxes-exclusive-55312.html
归功于：http: //forums.devshed.com/html-programming-1/make-checkboxes-exclusive-55312.html
回答by Anynomous
What you can do instead is to use input type radio and set a common name for all of them. If you try to check another, it will automatically uncheck first one.
您可以做的是使用输入类型收音机并为所有这些设置一个通用名称。如果您尝试检查另一个，它会自动取消选中第一个。
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<input type="submit">
</form>
</body>
</html>
At least this is simpler
至少这更简单
回答by Srikanth Venkatesh
This can be probably checked like this ...
这可能可以像这样检查......
<script type="text/javascript">
var call = function(obj){
var res=obj.value;
obj.checked=true;
for(var i=1;i<=3;i++)
{
if(document.getElementById("check"+i).value!=res )
{
document.getElementById("check"+i).checked=false;
}
}
}
</script>
<body>
<input type="checkbox" value="check1" size="46" id="check1" onclick="call(this)"/>
<input type="checkbox" value="check2" size="46" id="check2" onclick="call(this)"/>
<input type="checkbox" value="check3" size="46" id="check3" onclick="call(this)"/>
</body>
回答by Jeremy Craig
It would be much easier to use radio buttons rather than a checkbox. That way you can select only one option at a time which is what you want really.
使用单选按钮而不是复选框会容易得多。这样您一次只能选择一个您真正想要的选项。
回答by Ian
Can check like this:
可以这样检查：
At javascript:
在javascript：
function call(no, value) {
if(no== 0){
document.frmMTR.check2.checked = false
document.frmMTR.check3.checked = false;
}
else if(no== 1){
document.frmMTR.check1.checked = false
document.frmMTR.check3.checked = false;
}
else if(no== 2){
document.frmMTR.check1.checked = false
document.frmMTR.check2.checked = false;
}
}
At html:
在 html：
<input type="checkbox" name="check1" size="46" id="check1" onclick="call(0,this)"/>
<input type="checkbox" name="check2" size="46" id="check2" onclick="call(1,this)"/>
<input type="checkbox" name="check3" size="46" id="check3" onclick="call(2,this)"/>
