Looping Through An Array of Checkboxes

[ShoeLace1291]

I have a form with multiple checkbox arrays.  I also have hidden form fields that officially determine whether a checkbox is checked or not.  I need a script that loops through the first array of checkboxes and if they are checked, to set the value of the corresponding hidden field to 1(instead of the default 0 if they are off.

 

This is my form:

<table align='center' cellspacing='1' cellpadding='3' border='0'>

					<tr>

						<td align='right' width='30%'>Group Name</td>

						<td align='center' width='10%'>Read</td>

						<td align='center' width='10%'>Create</td>

						<td align='center' width='10%'>Modify</td>

						<td align='center' width='10%'>Attach</td>

						<td align='center' width='10%'>Comment</td>

						<td align='center' width='10%'>Delete</td>

						<td align='center' width='10%'>All/None</td>

					</tr><tr>

<td align='right'>Administrators</td>

				  <td align='center'><input type='checkbox' name='group[1][]' value='1'></td>

				  <input type='hidden' name='hidden[1][]' value='0'>
				  
				  <td align='center'><input type='checkbox' name='group[1][]' value='1'</td>

				  <input type='hidden' name='hidden[1][]' value='0'>

				  <td align='center'><input type='checkbox' name='group[1][]' value='1'></td>

				  <input type='hidden' name='hidden[1][]' value='0'>

				  <td align='center'><input type='checkbox' name='group[1][]' value='1'></td>

				  <input type='hidden' name='hidden[1][]' value='0'>

				  <td align='center'><input type='checkbox' name='group[1][]' value='1'></td>

				  <input type='hidden' name='hidden[1][]' value='0'>

				  <td align='center'><input type='checkbox' name='group[1][]'' value='1'></td>

				  <input type='hidden' name='hidden[1][]' value='0'>

				  <td align='center'><input type='checkbox' name='allNone' value=''></td>

			<tr><tr>
<td align='right'>Developers</td>

				  <td align='center'><input type='checkbox' name='group[2][]' value='1'></td>

				  <input type='hidden' name='hidden[2][]' value='0'>

				  
				  <td align='center'><input type='checkbox' name='group[2][]' value='1'</td>

				  <input type='hidden' name='hidden[2][]' value='0'>

				  <td align='center'><input type='checkbox' name='group[2][]' value='1'></td>

				  <input type='hidden' name='hidden[2][]' value='0'>

				  <td align='center'><input type='checkbox' name='group[2][]' value='1'></td>

				  <input type='hidden' name='hidden[2][]' value='0'>

				  <td align='center'><input type='checkbox' name='group[2][]' value='1'></td>

				  <input type='hidden' name='hidden[2][]' value='0'>

				  <td align='center'><input type='checkbox' name='group[2][]'' value='1'></td>

				  <input type='hidden' name='hidden[2][]' value='0'>

				  <td align='center'><input type='checkbox' name='allNone' value=''></td>

			<tr><tr>

</table>

 

So basically, my php script is going to loop through the hidden fields and get their values.  Since unchecked boxes return a null value, I use hidden input fields(named "hidden") to output the value of 1 if it's checkbox is checked and 0 if it's not.

 

Basically what the JS script needs to do is find all checkboxes with the name of group.  If the current checkbox is  checked, it sets the value of the corresponding hidden field to 1.

[DaiLaughing]

Is there a reason for not just using the CHECKED attribute?  It seems much easier then to access the data through the DOM.

[slurpee]

Hah this could be a pretty poorly written function as I rarely write in pure javascript anymore (jQuery ftw), but it seems to work for me.  I wrote it to work with your HTML as-is, although I do believe there are better ways to name/handle your checkboxes.  Basically, this function goes through all form elements and if the loop hits a checkbox with the name containing "group" and we haven't checked that array yet, we then go through each of the elements in that array (they'll have the name "group[2]" for example.).  If one of those is checked, we set the corresponding "hidden" field to 1.

 

If you can add onclick handlers to each checkbox it would make the code a bit cleaner, and if you could use some JS framework such as jQuery that too would help.  But here's the function give your code:

 

  function setHiddenValues(frm) {
    var hiddens = new Array();
    var checkboxes = new Array();
    var checkedValues = new Array();
    for(i=0; i<frm.elements.length; i++) {
      var thisCB = frm.elements[i];
      if(thisCB.type=="checkbox" && thisCB.name.match(/group/) && !inArray(checkedValues,thisCB.name)) {
        checkedValues.push(thisCB.name);
        checkboxes = document.getElementsByName(frm.elements[i].name);
        hiddens = document.getElementsByName(frm.elements[i].name.replace("group","hidden"));
        l = checkboxes.length;
        for(j=0; j<l; j++) {
          if(checkboxes[j].checked == true) {
            hiddens[j].value = 1;
          }
        }
      }
    }
    return false;
  }
  
  function inArray(arrayToSearch, stringToSearch) {
    arrayToSearch.sort();
    for (var i = 0; i < arrayToSearch.length; i++) {
      if (arrayToSearch[i] == stringToSearch)
        return true;
    }
    return false;
  }