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"居中表。