Cases à cocher jQuery

Question

La grille de contrôle des étudiants comporte une case à cocher Cochez tout en haut et elle contrôle l'activation/la désactivation des cases à cocher. Je souhaite activer et désactiver les cases à cocher dans la vue Grille Etudiants. Voici mon code:

$(document).ready(function() { 
    $("#chkAll").click(function() { 
     if ($(this).prop("checked") == "checked") { 
      $("#<%= gvStudents.ClientID %> :checkbox").not(this).prop("checked", "checked"); 
     } 
     else { 
      $("#<%= gvStudents.ClientID %> :checkbox").not(this).prop("checked", "false"); 
     }  
    });  
}); 

Il travaillait dans jQuery 1.4.xx mais aujourd'hui je suis passé à JQuery 1.8.1 et il ne fonctionne plus. De quoi ai-je besoin pour le faire fonctionner à nouveau?

Answer 1

Ceci est tout ce que vous avez besoin:

$("#chkAll").click(function() { 
    var checkAll = $(this).prop("checked"); 
    $("#<%= gvStudents.ClientID %> :checkbox").not(this).prop("checked", checkAll); 
}); 

Exemple en direct: http://jsfiddle.net/3ZfzS/

Mais pour rendre cela plus intuitif, vous devriez probablement décocher la case "checkAll" quand un ou plusieurs des autres sont décochés. Cela pourrait se faire avec cet ajout:

$("#<%= gvStudents.ClientID %> :checkbox").not('#chkAll').click(function(){ 
    var total = $("#<%= gvStudents.ClientID %> :checkbox").not('#chkAll').size(); 
    var checked = $("#<%= gvStudents.ClientID %> :checkbox").not('#chkAll').filter(':checked').size(); 
    $("#chkAll").prop("checked",total == checked); 
}); 

Un exemple concret: http://jsfiddle.net/xV2ej/

Answer 2

Selon votre sélecteur, il semblerait que vous utilisiez le même ID pour le checkboxes.

Soit donner un ID différent ou utiliser le sélecteur class à la place.

Answer 3

Ce retour de la ligne vrai ou faux, mais pas "vérifié", devinez c'est la raison

$(this).prop("checked") 

pour cocher/décocher

$(this).prop("checked",true) //check 
$(this).prop("checked",false) //uncheck