jQuery La localisation sélectionner/désélectionner

Question

J'utilise l'extrait suivant pour créer une sélection/désélectionner toutes les cases:

http://www.wiseguysonly.com/2010/01/15/select-and-unselect-all-checkboxes-with-jquery/

C'est une grande aide, mais demande comment vous pourriez aller sur le localisant effectué les cases à cocher uniquement pour ceux qui sont frères et sœurs (c'est-à-dire dans le même groupe de li éléments) de la boîte de sélection/désélection.

J'ai plusieurs listes de cases à cocher générées dynamiquement (donc difficile de leur donner différentes classes de sélecteur à cibler avec des variantes du script) qui ont chacune une case à cocher select/deselect. Actuellement, la vérification d'un effet affecte l'ensemble du groupe de cases à cocher.

(UPDATE)

Désolé, voici quelques exemples de code -

Le HTML -

<ul> 
    <li class="select-all" ><input type="checkbox" name="select-all" onclick="toggleChecked(this.checked)"> Select/Deselect All</li> 
    <li><input class="principal-group" type="checkbox" /> 1</li> 
    <li><input class="principal-group" type="checkbox" /> 2</li> 
    <li><input class="principal-group" type="checkbox" /> 3</li> 
</ul> 

<ul> 
    <li class="select-all" ><input type="checkbox" name="select-all" onclick="toggleChecked(this.checked)"> Select/Deselect All</li> 
    <li><input class="principal-group" type="checkbox" /> 1</li> 
    <li><input class="principal-group" type="checkbox" /> 2</li> 
    <li><input class="principal-group" type="checkbox" /> 3</li> 
</ul> 

et Jquery qui ne différencie pas entre les deux groupes de frères et sœurs -

function toggleChecked(status) { 
$(".principal-group").each(function() { 
$(this).attr("checked",status); 
}) 
} 

Il est formulé différemment à vos suggestions, comme réponse à un changement de statut.

Answer 1

Je ne suis pas sûr de savoir comment votre code HTML est posé, mais si elles sont dans le même conteneur, vous pouvez utiliser

$("input[type=checkbox]").click(function() { 
    $(this).siblings("input[type=checkbox]").attr("checked", $(this).attr("checked")); 
}); 

Voici un sample.

Answer 2

Modifiez votre sélecteur en conséquence. Disons si vos cases à cocher sont des frères et sœurs d'un li et quand vous avez un événement sur li et faites le select/unselect, voici le chemin. Vous avez youu ajouter ce code dans le cadre d'un élément frère (li dans ce cas)

$('li').click(function(){ 
    $(this).siblings().filter('input:checkbox').each(function() { 
     $(this).attr("checked",status); 
    }); 
}; 

Lorsque le statut peut être true ou false.

Answer 3

C'est ce que j'ai jeté ensemble pour mon cas. Il pourrait y avoir une méthode plus rapide et plus efficace, mais le travail est plutôt bien fait et assez flexible.

$("form#mass-actions-units a#select-all").click(function(event) { 
    event.preventDefault(); 
    var selectAllButton = $(this), 
     checkboxes = $('table.view-units tr td input[type="checkbox"]'); 

    if(selectAllButton.prop("selected")) { 
     selectAllButton.prop("selected", false) 
         .text("Select All"); 
     checkboxes.each(function() { 
      $(this).prop("checked", false); 
     }); 
    } else { 
     selectAllButton.prop("selected", true) 
         .text("Deselect All"); 
     checkboxes.each(function() { 
      $(this).prop("checked", true); 
     }); 
    } 
});