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>; если один из них не отмечен, снимите флажок «все» в этом ряду. Кроме того, я должен хранить проверенные значения для каждой строки с идентификатором для обработки формы. Грр, сегодня не мой день.

Answer 1

Попробуйте код на http://jsbin.com/ipuzo. Имена входов больше не важны, так как код работает на основе отношений (родительский дочерний элемент и т. Д.).

С точки зрения сценариев PHP в конце получения, сгруппированные флажки должны называться foo[] или тому подобное. Идентичные идентификаторы также недействительны. Поскольку форме не нужно отправлять флажок «все», name был удален и заменен классом.

Также исправлено несколько вещей HTML: <input /> - это самозакрывающийся тег, и есть более эффективные способы, чем align="center", для центрирования таблиц.

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

Может быть, эта ссылка поможет:

Установите все флажки с JQuery

Должно быть просто изменить его пример, чтобы он соответствовал вашим потребностям.