If a checkbox is checked the rest will be uncheck

**mason66** · 06-17-2012 01:42 PM

Hi,

How to do this on javascript. For example I have 5 checkboxes and If a checkbox is checked the rest will be uncheck. So basically it will be like a radio button list but I need to do this on checkboxes.. Please let me know how to do this. Sample code will be greatly appreciated..

Thanks!

**Padonak** · 06-17-2012 03:39 PM

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>123</title>
<style type="text/css">
body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding:0px;margin:15&#37; 0px 0px 0px;}
input[type="checkbox"]{margin-left:10px;}
label{font-weight:bold;font-style:italic;}
</style>
<script type="text/javascript">
/* array for the checkboxes */
var cbx=[];
function init(){
/* all INPUTS in the form */
var inps=document.getElementById('myform').getElementsByTagName('INPUT');
/* this loop goes through all INPUTS */
for(var i in inps){
/* if the current is not a checkbox, the loops skips it and goes further */
if(inps[i].type!='checkbox'){continue;}
else{
/* if the current is a checkbox, it is stored in the cbx array */
cbx.push(inps[i]);
/* when a checkbox is clicked */
inps[i].onclick=function(){
/* if it was unchecked, the function does nothing */
if(!this.checked){return;}
/* if it was checked the function loops through the cbx array */
else{for(var k in cbx){
/* if the current array's member is the checkbox which has been clicked, the loops skips it */
if(cbx[k]===this){continue;}
/* if it is another checkbox, it is getting unchecked */
else{cbx[k].checked=false;}
}
}
}
}
}
}

window.onload=init;
</script>
</head>
<body>
<form name="myform" id="myform" action="">
<label for="cb_1">Checkbox 1</label><input type="checkbox" name="cb_1" id="cb_1" /><br />
<label for="cb_2">Checkbox 2</label><input type="checkbox" name="cb_2" id="cb_2" /><br />
<label for="cb_3">Checkbox 3</label><input type="checkbox" name="cb_3" id="cb_3" /><br />
<label for="cb_4">Checkbox 4</label><input type="checkbox" name="cb_4" id="cb_4" /><br />
<label for="cb_5">Checkbox 5</label><input type="checkbox" name="cb_5" id="cb_5" />
</form>
</body>
</html>

**mason66** · 06-17-2012 08:50 PM

Thanks a lot! Exactly what i need..

**JMRKER** · 06-17-2012 10:07 PM

Alternate solution, but with a bit less logic testing...

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>123</title>

<style type="text/css">
body{
  text-align:center;font-family:Verdana,Arial;
  font-size:11px;
  background-color:#fff;
  color:#000;
  padding:0px;margin:15% 0px 0px 0px;
}
 input[type="checkbox"]{margin-left:10px;}
 label{font-weight:bold;font-style:italic;}
</style>

<script type="text/javascript">
function ckCBox(IDS) {
  var cBoxInfo = document.getElementById('cBoxInfo').getElementsByTagName('input');
  for (var i=0; i<cBoxInfo.length; i++) {
    cBoxInfo[i].checked = false;
  }
  document.getElementById(IDS).checked = true;
}

</script>
</head>
<body>
<form name="myform" id="myform" action="" onsubmit="return false">
 <div id="cBoxInfo">
<label for="cb_1">Checkbox 1</label><input type="checkbox" name="cb_1" id="cb_1" onclick="ckCBox(this.id)" /><br />
<label for="cb_2">Checkbox 2</label><input type="checkbox" name="cb_2" id="cb_2" onclick="ckCBox(this.id)" /><br />
<label for="cb_3">Checkbox 3</label><input type="checkbox" name="cb_3" id="cb_3" onclick="ckCBox(this.id)" /><br />
<label for="cb_4">Checkbox 4</label><input type="checkbox" name="cb_4" id="cb_4" onclick="ckCBox(this.id)" /><br />
<label for="cb_5">Checkbox 5</label><input type="checkbox" name="cb_5" id="cb_5" onclick="ckCBox(this.id)" />
 </div>
</form>
</body>
</html>

**xelawho** · 06-18-2012 04:03 PM

or (being that there will only ever be one checkbox checked at a time)...

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>123</title>

<style type="text/css">
body{
  text-align:center;font-family:Verdana,Arial;
  font-size:11px;
  background-color:#fff;
  color:#000;
  padding:0px;margin:15% 0px 0px 0px;
}
 input[type="checkbox"]{margin-left:10px;}
 label{font-weight:bold;font-style:italic;}
</style>


</head>
<body>
<form name="myform" id="myform" action="" onsubmit="return false">
 <div id="cBoxInfo">
<label for="cb_1">Checkbox 1</label><input type="checkbox" name="cb_1" id="cb_1" /><br />
<label for="cb_2">Checkbox 2</label><input type="checkbox" name="cb_2" id="cb_2" /><br />
<label for="cb_3">Checkbox 3</label><input type="checkbox" name="cb_3" id="cb_3" /><br />
<label for="cb_4">Checkbox 4</label><input type="checkbox" name="cb_4" id="cb_4" /><br />
<label for="cb_5">Checkbox 5</label><input type="checkbox" name="cb_5" id="cb_5" />
 </div>
</form>
<script type="text/javascript">
(function() {
var chkdOne;
  var cBoxInfo = document.getElementById('cBoxInfo').getElementsByTagName('input');
  for (var i=0; i<cBoxInfo.length; i++) {
    cBoxInfo[i].onclick = function(){
	if (chkdOne){chkdOne.checked=false}
	chkdOne=this;
			}
		}
	})();

</script>
</body>
</html>

**JMRKER** · 06-18-2012 10:44 PM

Originally Posted by mason66

Hi,

How to do this on javascript. For example I have 5 checkboxes and If a checkbox is checked the rest will be uncheck. So basically it will be like a radio button list but I need to do this on checkboxes.. Please let me know how to do this. Sample code will be greatly appreciated..

Thanks!

Now that you have several solutions,
can you explain the benefits of this script over a set of radio buttons?

Thread: If a checkbox is checked the rest will be uncheck

Thread Tools

Display

If a checkbox is checked the rest will be uncheck

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions