dank
09-05-2001, 04:04 PM
You've probably all seen "check all" and "clear all" options on checkbox forms that allow you to quickly select or deselect everything at once. A nice time saver, to be sure. Well, I wanted to do the same for a form full of radio boxes that each contained a Yes/No value. I didn't turn up any ready-made ways to accomplish this, so I figured I'd see what I could put together (is there anything better than JavaScript for wasting huge amounts of time on a seemingly trivial task?).
Problem is, how do you identify the radio form elements by value, since the Yes/No options for each row (in the table layout) share the same name? The checkbox all/none JavaScripts seem to take the approach of using a shared name for all the checkboxes, then running through the elements[] array and setting the 'checked' value to true or false if the elements' name matches a pre-set criteria. Obviously, that doesn't work for radios... Equally troubling is the fact that not just the radio boxes are counted in the elements[] array, so it's difficult to know where to start and stop when looping through the array and trying to pick out just valid items.
So, to make an unfortunately long story short (and more importantly, to offer the solution I came up with for anyone else hoping to do something similar), here is what I finally got working:
<script language="JavaScript">
<!--
function SetChecked (val) {
dsl = document.selectList;
// find the position in the elements array of the first
// and last radio id#, then loop between those values
for (var i = 0 ; i < dsl.elements.length; i++) {
if (dsl.elements[i].name == '<?php echo($first); ?>') {
var startElement = i; // second item in the radio pair
}
if (dsl.elements[i].name == '<?php echo($last); ?>') {
var endElement = i; // second item in the radio pair
}
}
if (val == '1') {
startElement--; // we want the first item of the radio pair
endElement--; //
}
for (var j = startElement ; j <= endElement; j+=2) {
dsl.elements[j].checked = true;
}
}
//-->
</script>
which is triggered by:
<p><a href="javascript:SetChecked(1)">Check All</a> - <a href="javascript:SetChecked(0)">Clear All</a></p>
Note that the $first and $last variables correspond to the name of the first and last radio pair in the form. I controlled that by setting the variables as the page is built, so that the JavaScript sees it as any ol' variable to compare against. Also, I named the form selectList.
Compared to some of the approaches I was trying, this one ended up being pretty darn eloquent. :) You could do the same with more than two options in the radio-name pair (it would have to be the same number of options for every radio-name pair in the form, though) by changing the incremental counter (j+=2) to however many items you want to skip over.
Of course, if anyone has suggestions for how to improve it or a totally differen, better course of action... I've only tested it in IE, so a Netscape test is in order.
Dan
Problem is, how do you identify the radio form elements by value, since the Yes/No options for each row (in the table layout) share the same name? The checkbox all/none JavaScripts seem to take the approach of using a shared name for all the checkboxes, then running through the elements[] array and setting the 'checked' value to true or false if the elements' name matches a pre-set criteria. Obviously, that doesn't work for radios... Equally troubling is the fact that not just the radio boxes are counted in the elements[] array, so it's difficult to know where to start and stop when looping through the array and trying to pick out just valid items.
So, to make an unfortunately long story short (and more importantly, to offer the solution I came up with for anyone else hoping to do something similar), here is what I finally got working:
<script language="JavaScript">
<!--
function SetChecked (val) {
dsl = document.selectList;
// find the position in the elements array of the first
// and last radio id#, then loop between those values
for (var i = 0 ; i < dsl.elements.length; i++) {
if (dsl.elements[i].name == '<?php echo($first); ?>') {
var startElement = i; // second item in the radio pair
}
if (dsl.elements[i].name == '<?php echo($last); ?>') {
var endElement = i; // second item in the radio pair
}
}
if (val == '1') {
startElement--; // we want the first item of the radio pair
endElement--; //
}
for (var j = startElement ; j <= endElement; j+=2) {
dsl.elements[j].checked = true;
}
}
//-->
</script>
which is triggered by:
<p><a href="javascript:SetChecked(1)">Check All</a> - <a href="javascript:SetChecked(0)">Clear All</a></p>
Note that the $first and $last variables correspond to the name of the first and last radio pair in the form. I controlled that by setting the variables as the page is built, so that the JavaScript sees it as any ol' variable to compare against. Also, I named the form selectList.
Compared to some of the approaches I was trying, this one ended up being pretty darn eloquent. :) You could do the same with more than two options in the radio-name pair (it would have to be the same number of options for every radio-name pair in the form, though) by changing the incremental counter (j+=2) to however many items you want to skip over.
Of course, if anyone has suggestions for how to improve it or a totally differen, better course of action... I've only tested it in IE, so a Netscape test is in order.
Dan