只有一个选中的复选框
[英]Only one selected checkbox
问题描述
I have 15 check boxes in a form.
我在一个表单中有 15 个复选框。 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.我想要一个 javascript function ，当用户选择 2 个复选框时，第一个复选框未选中，第二个复选框保持选中状态。
8 个解决方案
解决方案1
5 已采纳 2011-07-17 13:31:36
Would you be better off using radio buttons instead of checkboxes as per this site: http://www.echoecho.com/htmlforms10.htm ?根据此站点，您最好使用单选按钮而不是复选框： http://www.echocho.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;
}
解决方案2
2 2016-09-09 06:23:18
Check Fiddle检查小提琴
- Give name of you checkboxs let 'myCheckbox'.给你的复选框命名让'myCheckbox'。
- On click of checkbox loop through all checkbox with name 'myCheckbox';单击复选框时，将遍历所有名为“myCheckbox”的复选框；
- make 'myCheckbox'
uncheck.uncheck“myCheckbox”。 - make Clicked Checkbox
checked.checkedClicked Checkbox 。
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;
}
解决方案3
1 2011-07-17 13:27:00
<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
解决方案4
0 2015-01-14 06:27:12
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)"/>
解决方案5
0 2017-05-15 15:39:12
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;
}
}
}
https://codepen.io/thomasweld/pen/Pmaega?editors=1010 https://codepen.io/thomasweld/pen/Pmaega?editors=1010
解决方案6
0 2018-01-16 05:25:53
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至少这更简单
解决方案7
0 2011-07-17 13:46:23
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>
解决方案8
0 2011-07-17 14:58:00
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.这样你就可以 select 一次只有一个选项，这是你真正想要的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.