Only one selected checkbox
Question
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.
8 answers
solution1
5 ACCPTED 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 ?
If you want to use check boxes I guess you could do something like this:
HTML Code:
<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:
function selectOnlyThis(id) {
for (var i = 1;i <= 4; i++)
{
document.getElementById("Check" + i).checked = false;
}
document.getElementById(id).checked = true;
}
solution2
2 2016-09-09 06:23:18
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.
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
function selectOnlyThis(id){
var myCheckbox = document.getElementsByName("myCheckbox");
Array.prototype.forEach.call(myCheckbox,function(el){
el.checked = false;
});
id.checked = true;
}
solution3
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
solution4
0 2015-01-14 06:27:12
Can check like this:
At 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:
<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)"/>
solution5
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.
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:
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;
}
}
}
solution6
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
solution7
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>
solution8
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.