jquery and grouping checkboxes

Question

So this is what I have:

<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script> 
<script>
   $().ready(function() {
     var allVals = [];
     $("input[name^=utType]").each(function() {
       var input = $(this);   
       var name = input.attr('name');    
       var num = /\d+$/.exec(name)[0]; 
       if ($(this).checked) {
         allVals.push($(this).val());
         alert(allVals);
       }
     });
   });
</script>

and I have a form with:

<form action="" method="post">
  <table width="70%" cellspacing="3" cellpadding="3">
    <tr>
      <td align="center">
        <label>All</label><br />
        <input type="checkbox" name="utType1" id="utType1" value="all">
      </td>
      <td align="center">
        <label>E</label><br />
        <input type="checkbox" name="utType1" id="utType1" value="e">
      </td>
      <td align="center">
        <label>G</label><br />
        <input type="checkbox" name="utType1" id="utType1" value="g">
      </td>
      <td align="center">
        <label>S</label><br /> 
        <input type="checkbox" name="utType1" id="utType1" value="w">
      </td>
      <td align="center">
        <label>W</label><br />
        <input type="checkbox" name="utType1" id="utType1" value="s">
      </td>
    </tr>
    <tr>
      <td align="center">
         <label>All</label><br />
         <input type="checkbox" name="utType2" id="utType2" value="all">
      </td>
      <td align="center">
        <label>E</label><br />
        <input type="checkbox" name="utType2" id="utType2" value="e">
      </td>
      <td align="center">
        <label>G</label><br />
        <input type="checkbox" name="utType2" id="utType2" value="g">
      </td>
      <td align="center">
        <label>S</label><br /> 
        <input type="checkbox" name="utType2" id="utType2" value="w">
      </td>
      <td align="center">
        <label>W</label><br />
        <input type="checkbox" name="utType1" id="utType1" value="s">
      </td>
    </tr>
  </table>

</form>

Several things that I will need to do: if "All" is checked, check all the other checkboxes in the same <tr>; if one of them is unchecked then uncheck the "all" checkbox in that row. Also, I have to store the checked values for each row with the id to process the form. Grr, today is not my day.

Answer 1

A simple tutorial on how to create the "select all" feature for checkboxes:

http://jetlogs.org/2007/08/01/jquery-select-all-checkbox/

Answer 2

Maybe this link will help:

Check All Checkboxes with JQuery

It should be simple to modify his example to fit your needs.

Answer 3

After looking at the links, this is what I have now:

   <script src="scripts/jquery-1.3.2.js" type="text/javascript"></script> 
 <script>
    $().ready(function() {

$("input[name^=all_]").click(function() {
var input = $(this);   
var name = input.attr('name');    
var num = /\d+$/.exec(name)[0]; 
alert(num);
$("#g"+num).attr('checked', $("#all_"+num).is(':checked'));
$("#e"+num).attr('checked', $("#all_"+num).is(':checked'));
$("#w"+num).attr('checked', $("#all_"+num).is(':checked'));
$("#s"+num).attr('checked', $("#all_"+num).is(':checked'));

}); });

<form action="" method="post">
<table width="70%" cellspacing="3" cellpadding="3">
   <tr>
   <td align="center">
     <label>All</label><br />
     <input type="checkbox" name="all_1" id="all_1" value="all">
  </td>
  <td align="center">
    <label>E</label><br />
    <input type="checkbox" name="e1" id="e1" value="e">
   </td>
   <td align="center">
      <label>G</label><br />
     <input type="checkbox" name="g1" id="g1" value="g">
    </td>
    <td align="center">
          <label>S</label><br /> 
        <input type="checkbox" name="s1" id="s1" value="s">
    </td>
    <td align="center">
         <label>W</label><br />
       <input type="checkbox" name="w1" id="w1" value="w">
     </td>
     </tr>
      <tr>
    <td align="center">
     <label>All</label><br />
      <input type="checkbox" name="all_2" id="aall_2" value="all">
    </td>
   <td align="center">
     <label>E</label><br />
     <input type="checkbox" name="e2" id="e2" value="e">
   </td>
   <td align="center">
      <label>G</label><br />
      <input type="checkbox" name="g2" id="g2" value="g">
   </td>
   <td align="center">
  <label>S</label><br /> 
       <input type="checkbox" name="s2" id="s2" value="s">
    </td>
    <td align="center">
       <label>W</label><br />
       <input type="checkbox" name="w2" id="w2" value="w">
    </td>
     </tr>
     </table>
 <input type="submit" name="submit" value="go" />
    </form>

now, the problem is the second all_2 checkbox fails. the first one works perfect.

Answer 4

Try the code at http://jsbin.com/ipuzo. The names of the inputs are no longer important, as the code works on a relationship basis (parent sibling child etc).

In terms of a PHP scripting at the recieving end, grouped checkboxes should be named foo[], or the likes. Identical ids are not valid either. Since the form needn't submit the all checkbox, it has had its name removed and replaced with a class.

A few HTML things have also been fixed: <input /> is a self-closing tag, and there are better ways than align="center" to center tables.