INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Checkboxes

Checkbox overview by kristof
Posted: 29 Aug 01

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

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close