ASP.net MVC Définir les cases à cocher à côté client

Question

Ma situation est la suivante: créer une page de boîte de réception simple. La boîte de réception est une liste faite à partir d'une grille DevExpress. Chaque ligne de la grille a une case à cocher que l'utilisateur peut vérifier afin de pouvoir supprimer plusieurs enregistrements (similaire à Yahoo Mail etc). Lorsque l'utilisateur clique sur le lien tout sélectionner ou sur le lien tout effacer, je dois cocher ou décocher toutes les cases de la grille. Comment puis-je faire avec les scripts côté client? Merci

Answer 1

En utilisant jquery il devrait être assez Easy- supposant que vous pouvez utilisez l'un des sélecteurs pour sélectionner toutes les cases (jetez un oeil aux différents sélecteurs jquery http://api.jquery.com/category/selectors/).

Joindre un gestionnaire de bascule:

$('Selector for the "select all" checkbox>').toggle(function() { 
    alert('First handler for .toggle() called.'); 
}, function() { 
    alert('Second handler for .toggle() called.'); 
}); 

Sélectionner toutes les cases et quand basculée basculer l'état vérifié des autres cases à cocher:

$('<Selector for the ones you want to toggle>').attr('checked', true); 

fournir quelques échantillons HTML, ou un lien vers une page, si vous avez besoin d'aide supplémentaire.

donc mettre ensemble, en supposant que votre « tout sélectionner » case à cocher avait une carte d'identité de « uxSelectAll » et ceux que vous souhaitez modifier une classe CSS de « case-mail-éléments » ce serait quelque chose comme:

$('#uxSelectAll').toggle(function() { 
    $('.checkbox-mail-items').attr('checked', true); 
}, function() { 
    $('.checkbox-mail-items').attr('checked', false); 
}); 

Answer 2

La méthode la plus simple consiste à utiliser jQuery. Avec le bon sélecteur, c'est à peu près un seul paquebot. Je ne sais pas combien vous savez jQuery donc voici un lien vers le sélecteur docs si vous voulez lire:

http://api.jquery.com/category/selectors/

Le sélecteur dépendra de la mise en page de votre page. Je l'ai fait avant d'utiliser quelque chose comme ceci:

$("#tableId tr td input:checkbox").attr("checked", true); 

Dans cet exemple, toutes les cases dans un tableau avec un id de « tableid » sont vérifiées

Answer 3

Vous pouvez créer un délégué (jquery) pour toutes les cases une fois que vous avez répondu à la question ci-dessus. avec quelque chose comme pour effectuer une action pour chaque case à cocher:

$('div.myGridDivClass tbody').delegate(':checkbox', 'click', function(){ 

      var $checkedRow = $(this), $row = $checkedRow.closest('tr') 
// check row is checked 
// toggleclass for checked css class and apply to the $row or whatever u want 
// do something here 
});