jquery et cases à cocher regroupement

Question

Voilà donc ce que j'ai:

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

et j'ai un formulaire avec:

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

Plusieurs choses que je dois faire: si « All » est cochée , cochez toutes les autres cases dans le même <tr>; Si l'un d'entre eux n'est pas coché, décochez la case "Tous" dans cette ligne. De plus, je dois stocker les valeurs vérifiées pour chaque ligne avec l'identifiant pour traiter le formulaire. Grr, aujourd'hui n'est pas ma journée.

Answer 1

Peut-être que ce lien aiderai:

Check All Checkboxes with JQuery

Il doit être simple de modifier son exemple pour répondre à vos besoins.

Answer 2

Après avoir examiné les liens, voici ce que j'ai maintenant:

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

maintenant, le problème est la deuxième case all_2 échoue. le premier fonctionne parfaitement.

Answer 3

Essayez le code à http://jsbin.com/ipuzo. Les noms des entrées ne sont plus importants, car le code fonctionne sur une base relationnelle (enfant parent, frère, etc.).

En termes de script PHP à la fin de la réception, les cases groupées doivent être nommées foo[], ou les mentions «J'aime». Les identifiants identiques ne sont pas non plus valides. Étant donné que le formulaire n'a pas besoin de soumettre toute la case à cocher, son name a été supprimé et remplacé par une classe.

Quelques éléments HTML ont également été corrigés: <input /> est un tag à fermeture automatique, et il existe de meilleurs moyens pour centrer les tables que align="center".