Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Checkbox overview

Checkboxes

Checkbox overview

by  kristof  Posted    (Edited  )
Hi all,

since questions about checkboxes are frequently returning subjects, I've put together this overview.

Read-only checkbox:

Suppose you have a checkbox which is checked or unchecked depending on the output of a database,
and you want to show the result without allowing the client to change it.

This is how you can achieve that:

<input type="checkbox" name="chkBox" value="1" checked onClick="window.focus;return false">Confirm by e-mail

Check random amount of checkboxes

<html>
<head>
<title>Checkboxes</title>
<script language="JavaScript">
formname="formName"
function init() {
obj=document.forms[formname].elements;
maxNr = 0;
cnt = 1;
for (i=0;i<obj.length;i++) {
name = "chkBox" + cnt;
if (obj[ i ].type=="checkbox" && obj[ i ].name == name) {
maxNr++;
cnt++;
}
}
}

function checkStatus() {
nrChecked = 0;
cnt = 1;
for (i=0;i<obj.length;i++) {
name = "chkBox" + cnt;
if(obj[ i ].type=="checkbox" && obj[ i ].name == name){
stat = eval("document.formName."+name);
if (stat.checked) { nrChecked++ }
cnt++;
}
}
if (nrChecked != maxNr) {
alert("You haven't selected all choices!\nStill "+ (maxNr - nrChecked) +" checkboxes unchecked!");
return false
}
return true
}
</script>
</head>

<BODY onload="init()" BGCOLOR="#FFFFFF" MARGINWIDTH="0" MARGINHEIGHT="0" LEFTMARGIN="0" TOPMARGIN="0">
<form action="javascript:alert('All done!')" onsubmit="return checkStatus()" name="formName" method="post">
<input type="checkbox" name="chkBox1" value="1"><br>
<input type="checkbox" name="chkBox2" value="1"><br>
<input type="checkbox" name="chkBox3" value="1"><br>
<input type="checkbox" name="chkBox4" value="1"><br>
<input type="checkbox" name="chkBox5" value="1"><br>
<input type="checkbox" name="chkBox6" value="1"><br>
<input type="checkbox" name="chkBox7" value="1"><br>
<input type="checkbox" name="chkBox8" value="1"><br>
<input type="checkbox" name="chkBox9" value="1"><br>
<input type="checkbox" name="chkBox10" value="1"><br>
<input type="submit" name="sbmit" value="Submit">
</form>
</body>
</html>

De/Select Random amount of checkboxes:

<html>
<head>
<title>Checkboxes</title>
<script language="JavaScript">
checked = true;
name="chkBox"
formname="formName"
function init() {
obj=document.forms[formname].elements;
chkBoxArr = new Array();
j=0;
for (i=0;i<obj.length;i++) {
if (obj[ i ].type=="checkbox") {
chkBoxArr[j] = [ i ];
j++;
}
}
}
function changeStatus() {
if (checked) { checked = false } else { checked = true };
for (i=0;i<obj.length;i++) {
if(obj[ i ].type=="checkbox" && obj[ i ].name==name){
stat = document.forms.formName.chkBox[ i ];
stat.checked = checked;
}
}
}
</script>
</head>

<BODY onload="init()" BGCOLOR="#FFFFFF" MARGINWIDTH="0" MARGINHEIGHT="0" LEFTMARGIN="0" TOPMARGIN="0">
<form action="" name="formName" method="post">
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="checkbox" name="chkBox" value="1" checked><br>
<input type="button" name="slct" value="De/select All" onClick="changeStatus()">
</form>
</body>
</html>

And another variant (with inverse, thanks to Vituz for this one)

<html>
<head>
<title>[de]Select All</title>
<script language="JavaScript">
var name,formname
name="chkBox"
formname="formName"

function SelectAll(flag,inverse) {//if (!flag)
var obj,len
obj=document.forms[formname].elements
len=obj.length
for (ii=0;ii<len;ii++) {
if(obj[ii].type=="checkbox" && obj[ii].name==name){
stat = document.forms.formName.chkBox[ii];
if (inverse && flag==1){
been=stat.checked
stat.checked =(!been)?true:false
}
else stat.checked =(flag==1)?true:false
}}}
</script>
</head>
<BODY BGCOLOR="#FFFFFF" >
<form action="" name="formName" method="post">
<input type="checkbox" name="chkBox" value="1"><br>
<input type="checkbox" name="chkBox" value="1"><br>
<input type="checkbox" name="chkBox" value="1"><br>
<input type="checkbox" name="chkBox" value="1"><br>
<input type="checkbox" name="chkBox" value="1"><br>
<input type="checkbox" name="chkBox" value="1"><br>
<input type="checkbox" name="chkBox" value="1"><br>
<input type="checkbox" name="chkBox" value="1"><br>
<input type="checkbox" name="chkBox" value="1"><br>
<input type="checkbox" name="chkBox" value="1"><br>
<input type="button" name="clickme" value="[De]Select All" onClick="SelectAll(document.forms.formName.todo[document.forms.formName.todo.selectedIndex].value , document.forms.formName.inv.checked)"><br>
inverse <input type="checkbox" name="inv" value="1"><br>
<select name="todo">
<option value=1>select
<option value=0>deselect
</select>
</form>
</body>
</html>

Remarks and additional codes are more than welcome :)
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top