Checked boxes and JS question

[BigDoug]

I want to know if I have the following HTML code and I want to be able to toggle between all selected and none selected, is there a way and could someone provide some sample code for me to play around with. I will say that the code I am using currently (HTML) is being generated by a CGI script. Below is the HTML code:

<input type=&quot;checkbox&quot; name=&quot;emailAddress&quot; checked>

I want to be able to insert some JS before this that will make a button that allows toggling between all checked and none checked. It sounds complicated to me, that is why I am here asking the experts.

 

[jpbrassard]

It's actually not too difficult. For all your checkboxes, give them the same name, like

[tt]<input type=checkbox id=&quot;emailAddress&quot; name=&quot;chxBox&quot; checked>
<input type=checkbox id=&quot;phoneNumber&quot; name=&quot;chkBox&quot; checked>
etc...
[/tt]

Then, for your button, code like so:

[tt]<input type=button name=&quot;toggleChkBox&quot; id=&quot;toggleChkBox&quot; onclick=&quot;toggleChk('chkBox')&quot;>[/tt]

Then, in your script header, put the following:

[tt]var bChecked;

function defaultChkBoxVal(value) {
bChecked = value;
}

function toggleChkBox(which) {
var oChk = document.getElementsByName(which);
var n;

//spin thru all checkboxes and set val accordingly
for (n=0; n < oChk.length; n++) {
if (oChk.checked != bChecked) {
oChk.checked = bChecked;
}
}
}[/tt]

Finally, in your body tag's onload event, call &quot;defaultChkBoxVal&quot; with your default value for bChecked.

This may need a little tweaking - I'm doing this from memory, from code I haven't touched in half a year - but this has the basics for what your looking for.

HTH,
jp

 

[BigDoug]

This is sort of what I am looking for but my question is can this be done without header script info and a body code addition? JS may not be able to do what I want but that is why I am asking because I just don't know. Thank you for your reply.

 

[jpbrassard]

The JS script need not actually reside in the header - you can write it in a separate file with the &quot;.js&quot; extension, and then reference it in your script declaration like so:

[tt]<SCRIPT language=&quot;javascript&quot; src=&quot;foo.js&quot;></SCRIPT>[/tt]

Unfortunately, I don't know of a way to do what you want to do without JS or some other client-side scripting language. You can get around the BODY onload requirement by doing something simple like this:

[tt]
function toggleChkBox(which){
var oChk = document.getElementsByName(which);
var n;

//spin thru all checkboxes and set val accordingly
for (n=0; n < oChk.length; n++) {
oChk[n].checked = (oChk.checked == true) ? false : true;
}
}[/tt]

Of course, that would screw up if a user toggled some of the checkboxes individually. To get around that, you can have a hidden field in your HTML ([tt]<INPUT type=hidden>[/tt]) that will store the current state of ... er, checkedom. Something like true for checked, false for unchecked. In which case, the above code would read:

[tt]function toggleChkBox(which){
var oChk = document.getElementsByName(which);
var n;
var bChecked = new Boolean();
var oVal = document.getElementById('hiddenChkVal'); //our hidden field

bChecked = oVal.value;

//spin thru all checkboxes and set val accordingly
for (n=0; n < oChk.length; n++) {
oChk[n].checked = (bChecked == true) ? false : true; //constructor to set the checked value to the opposite of bChecked's current value
}

// do the same thing now for bChecked after the loop's execution
bChecked = (bChecked == true) ? false: true;
}[/tt]

I hope that helps you a little better than my last post.
jp