auto checking checkboxes

wrexhamafc234 · Dec 18, 2006

hello, any ideas how I can create a single function that will allow me to automatically check checkboxes?

e.g. if checkbox1 (id=1) is checked, all other checkboxes will be checked
if checkbox 1-2 (id=1-2) is checked, checkboxes 1-2-1 and 1-2-2 will be checked.

Code:

html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head runat="server">
    <title>Untitled Page</title>
    <SCRIPT type='text/javascript'>

function check(field) {

}
    
</script>

</head>
<body>
<form name=myform action="" method=post runat=server>
<table>
<tr><td>
<b>Checkbox Example</b><br>
<input type=checkbox name=list id="1" onClick="this.value=check(this.form.list)">Root<br>

&nbsp;<input type=checkbox name=list id="1-1"><br>
&nbsp;<input type=checkbox name=list id="1-2" onClick="this.value=check(this.form.list)"><br>
    &nbsp;&nbsp;&nbsp;<input type=checkbox name=list id="1-2-1"><br>
    &nbsp;&nbsp;&nbsp;<input type=checkbox name=list id="1-2-2"><br>
&nbsp;<input type=checkbox name=list id="1-3" onClick="this.value=check(this.form.list)"><br>
    &nbsp;&nbsp;&nbsp;<input type=checkbox name=list id="1-3-1"><br>
    &nbsp;&nbsp;&nbsp;<input type=checkbox name=list id="1-3-2"><br>
&nbsp;<input type=checkbox name=list id="2-1"><br>
&nbsp;<input type=checkbox name=list id="2-2"><br>
&nbsp;<input type=checkbox name=list id="2-3"><br>
                               
</td></tr>
</table>
</form>
</body>
</html>

Any ideas?

bdichiara · Dec 19, 2006

Well, I don't think you're checkboxes are structured correctly. What i mean is according to your example, you should have 6 "groups" under root and only 2 & 3 have sub-items. However, here's a function you can use to select all items below it and if it's "root" it does them all.

Code:

function toggle(els) {
  var fields = document.getElementsByTagName("input");
  for(var i=0;i<fields.length;i++){
    if(fields[i].type == "checkbox"){
      if(fields[i].id.indexOf(els+"-") == 0 || els == "root"){
        if(document.getElementById(els).checked == true){
          document.getElementById(fields[i].id).checked = true;
        } else {
          document.getElementById(fields[i].id).checked = false;
        }
      }
    }
  }
}

Make sure all of your elements have IDs. I tested it with this setup:

Code:

<form name=myform id="myform" action="" method=post runat=server>
<table>
<tr><td>
<b>Checkbox Example</b><br>
<input type=checkbox name=list id="root" onclick="toggle(this.id);">Root<br>

&nbsp;<input type=checkbox name=list id="1" onclick="toggle(this.id);">
1<br>
&nbsp;<input type=checkbox name=list id="2" onclick="toggle(this.id);">
2<br>
    &nbsp;&nbsp;&nbsp;<input type=checkbox name=list id="2-1" onclick="toggle(this.id);">
    2-1<br>
    &nbsp;&nbsp;&nbsp;<input type=checkbox name=list id="2-2" onclick="toggle(this.id);">
    2-2<br>
&nbsp;<input type=checkbox name=list id="3" onclick="toggle(this.id);">
3<br>
    &nbsp;&nbsp;&nbsp;<input type=checkbox name=list id="3-1" onclick="toggle(this.id);">
    3-1<br>
    &nbsp;&nbsp;&nbsp;<input type=checkbox name=list id="3-2" onclick="toggle(this.id);">
    3-2
    <br>
&nbsp;<input type=checkbox name=list id="4" onclick="toggle(this.id);">
4
<br>
&nbsp;<input type=checkbox name=list id="5" onclick="toggle(this.id);"> 
5
<br>
&nbsp;<input type=checkbox name=list id="6" onclick="toggle(this.id);"> 
6
<br>
                               
</td></tr>
</table>
</form>

Give it a try and let me know if it works for you.

_______________
_brian.

bdichiara · Dec 19, 2006

I started to write a function that will add the "toggle" on all the checkboxes, but couldn't get it to work. maybe a more experienced person can fix it.

Code:

addEvent(window, 'load', init, false);

function init(){
  var inputs = document.getElementsByTagName('input');
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == "checkbox")) {
      addEvent(inputs[i], 'onclick', 'toggle(this.id)', false);
    }
  }
}

_______________
_brian.

bdichiara · Dec 19, 2006

There it is:

Code:

function init(){
  var inputs = document.getElementsByTagName("input");
  var btype=0;
  if (window.attachEvent) {
    b=1;
  } else if (window.addEventListener) {
    b=2;
  }
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == "checkbox") {
	  switch (b) {
        case 1:
          inputs[i].attachEvent("onclick","toggle(this.id)");
        break;
        case 2:
          inputs[i].setAttribute("onclick","toggle(this.id)")
        break;
        default:
          //just give up
      }
    }
  }
}

and add onLoad="init();" to your body tag:

Code:

<body onLoad="init();">

_______________
_brian.

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!

auto checking checkboxes

wrexhamafc234

Programmer

bdichiara

Programmer

bdichiara

Programmer

bdichiara

Programmer

Similar threads

Part and Inventory Search

Sponsor