Following from the article for the automatic clearing of checkboxes, I wanted to give youthis heads up on how to modify this script to allow ths use of different names for checkboxes. If you remember the previous script relied on all but one checkbox having the same name (for simplicity’s sake I have kept the bulk of the text from the previous article here and just added the relevant changes). Now in some instances this is not useful as you may be passing criteria based on the name of the checkbox.

Let’s start off again with the actual form:

<form name=”example” action=”<your destination page>”>
<input type=”Checkbox” name=”all” onclick=”javascript:SetOther()” checked> Search All
<input type=”Checkbox” name=”test1” onclick=”javascript:SetAll()”> News
<input type=”Checkbox” name=”test2” onclick=”javascript:SetAll()”> Weather
<input type=”Checkbox” name=”test3” onclick=”javascript:SetAll()”> Entertainment
<input type=”Checkbox” name=”test4” onclick=”javascript:SetAll()”> Music
<input type=”Submit” value=”Search”>
</form>

Nothing much has changed since the last article apart from the fact that now all checkboxes have different names. Now in order to get around the problem of different checkboxes we will be using pattern matching (regular expressions) to determine which boxes to un-tick. The good news is that you will not have to modify the script greatly, so let’s look at the script:

<SCRIPT LANGUAGE=”JavaScript”>
<!– hide script from older browsers
function SetAll() {
   dml = document.example;
   len = dml.elements.length;
   val = 0;
   pat_check = /[test]/g;
   var i = 0;
   for(i = 0; i<len; i++) {
      if ( pat_check.exec(dml.elements[i].name) != null ){
         dml.all.checked = val;
      }
   }
}
function SetOther() {
   dml = document.example;
   len = dml.elements.length;
   val = 0;
   pat_check = /[test]/g;
   var i = 0;
   for(i = 0; i<len; i++) {
      if ( pat_check.exec(dml.elements[i].name) != null ){
         dml.elements[i].checked = val;
      }
   }
}
–>
</script>

Right let’s take a look at the first function, called SetAll. This functions controls the behaviour of the Search All checkbox, i.e. if the any of the different categories checkboxes are ticked remove the check for Search All checkbox. On the first three lines of that function I set a bunch of variables to make the coding easier (i.e. shorter). The variable dml stores the form name, len stores the number of elements elements (checkboxes) of said form, val is set 0 and I also set i to 0. The new addition here involves the definition of a pattern: pat_check = /[test]/g;. As before we now loop over the list of elements, but this time we are comparing the name of said elements with the pattern. So if any checkbox has a name that contains the work test and it is checked, the script will un-tick the Search all box. The statement between the if clause does exactly that, it sets element all to val, which is 0.

The second function displays a similar behaviour. The difference is that when the Search All checkbox is ticked, the tick in all the other categories is removed. Again I hope this made perfect sense and that it was useful.