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的每行的已检查值以处理表单。格尔，今天不是我的日子。

Answer 1

尝试http://jsbin.com/ipuzo处的代码。输入的名称不再重要，因为代码基于关系（父级兄弟孩子等）工作。

就接收端的PHP脚本而言，分组复选框应命名为foo[]或类似名称。相同的ID也无效。由于表单无需提交所有复选框，因此已将其移除name并替换为类。

一些HTML内容也已修复：<input />是一个自动关闭标记，并且有比align="center"更好的方法来使表格居中。

Answer 2

也许这个链接会有所帮助：

Check All Checkboxes with JQuery

修改他的例子以满足您的需求应该很简单。

Answer 3

查看链接后，这就是我现在所拥有的：

   <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复选框失败。第一个是完美的。

jquery和分组复选框

3 个答案: