jQuery和分组复选框

Question

所以这是我：

<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> 

，我有一个表格：

<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> 

几件事情，我需要做的：如果“所有”被选中，检查相同的<tr>中的所有其他复选框;如果其中一个未选中，则取消选中该行中的“全部”复选框。此外，我必须存储每行的检查值与ID处理表单。 Grr，今天不是我的一天。

Answer 1

也许这个链接将帮助：

Check All Checkboxes with JQuery

它应该是简单修改他的例子来满足您的需求。

Answer 2

看链接后，这是我现在有：

<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> 

现在，问题是第二个all_2复选框失败。第一个完美的作品。

Answer 3

尝试代码为http://jsbin.com/ipuzo。输入的名称不再重要，因为代码在关系基础上工作（父母兄弟姐妹等）。

在在recieving端的PHP脚本而言，分组复选框都应该被命名为foo[]，或喜欢。相同的ID也是无效的。由于形式不必提交所有的复选框，它有它的name移除并用类代替。

一些HTML的东西也被修复了：<input />是一个自动关闭的标签，并且有更好的方法比align="center"居中表。