jquery aide de l'opération de cases à cocher nécessaire

Question

Je ne sais pas comment faire le codage dans jquery pour case

<p class="list"> 
    <label for="chkSunday"><input type="checkbox" checked name="chkday" id="chkday0" value="0" />All days</label> 
    <label for="chkSunday"><input type="checkbox" name="chkday" id="chkday1" value="1" />Sunday</label> 
    <label for="chkMonday"><input type="checkbox" name="chkday" id="chkday2" value="2" />Monday</label> 
    <label for="chkTuesday"><input type="checkbox" name="chkday" id="chkday3" value="3" />Tuesday</label> 
    <label for="chkWednesday"><input type="checkbox" name="chkday" id="chkday4" value="4" />Wednesday</label> 
    <label for="chkThursday"><input type="checkbox" name="chkday" id="chkday5" value="5" />Thursday</label> 
    <label for="chkFriday"><input type="checkbox" name="chkday" id="chkday6" value="6" />Friday</label> 
    <label for="chkSaturday"><input type="checkbox" name="chkday" id="chkday7" value="7" />Saturday</label> 
</p> 

Dans les cases à cocher ci-dessus, j'ai quelques cas d'utilisation:

• USECASE 1
  • L'utilisateur sélectionné un jour, puis "tous" case à cocher doit décocher
• Cas d'utilisation 2
  • utilisateur décoché tous les jours, puis case à cocher « tous » doivent vérifié

Je ne sais pas comment gérer cela dans jQuery.

Answer 1

Je pense que c'est ce que vous êtes après:

$(".list :checkbox").change(function() { 
    if(this.id == "chkday0") $(".list :checkbox:gt(0)").attr("checked", false); 
    $("#chkday0").attr("checked", $(".list :checkbox:gt(0):checked").length == 0); 
}); 

You can test it out here. Qu'est-ce que cela fait est truquant un gestionnaire change à chaque case à cocher dans ce <p>.

• Si c'est le premier (tous), effacez tous les autres jours.
• Peu importe lequel, vérifiez le premier si aucun autre n'est sélectionné (cochez Tous s'il n'y a pas de jours).

Notez également dans la démo les <label> éléments modifiés ... ils avaient for invalides attributs, et comme ils l'enveloppent <input> ils vont avec, vous pouvez simplement supprimer le for de toute façon.

Answer 2

Ceci est assez similaire à @Nick's answer, mais évite une partie de la sélection DOM. Il suppose un groupe statique d'éléments.

Exemple:http://jsfiddle.net/patrick_dw/7UwLU/

var $allBoxes = $('p.list input:checkbox').change(function() { 
    var $dayBoxes = $allBoxes.slice(1); 
    if ($allBoxes[0].checked) $dayBoxes.not(this).attr('checked', ''); 
    $allBoxes[0].checked = !$dayBoxes.filter(':checked').length; 
}); 

Pas besoin de changer la réponse acceptée. Juste en montrant une autre façon.