Case à cocher multiple Sélectionnez Désélectionnez à l’aide de jQuery
Lors du développement d’applications Web, nous devons généralement effectuer des opérations CRUD. Pour la vue en liste, nous avions l’habitude d’avoir une table avec plusieurs lignes. Dans chaque ligne, nous gardons une case à cocher pour cocher/décocher une ligne spécifique. Ces cases à cocher sont utilisées lorsque l’utilisateur souhaite supprimer une ligne de la base de données. Il peut également avoir une fonctionnalité de suppression en bloc où la case à cocher parente est utilisée pour sélectionner/désélectionner les cases à cocher enfant.
Dans cet article, nous étudions comment effectuer la sélection/désélection de plusieurs cases à cocher à l’aide de jQuery.
Notre vue finale est comme indiqué dans la capture d’écran ci-dessous. Il affiche la case à cocher parente dans la ligne d’en-tête et chaque ligne a sa propre case à cocher.
En cochant la case parent, toutes les cases enfants seront cochées. Et lorsque nous désélectionnons la case parent, les cases enfants devraient être décochées. Cela dit, voyons comment appliquer plusieurs cases à cocher sélectionner/désélectionner à l’aide de jQuery.
Créer un exemple de table dans Bootstrap
Pour commencer, nous avons besoin d’un tableau avec quelques enregistrements ainsi que des cases à cocher. Dans le code ci-dessous, je crée une table factice à l’aide de Bootstrap. J’ai également ajouté des entrées factices dans le tableau.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8">
<table class="table">
<thead>
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="singlechkbox" name="username" value="1"/></td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td><input type="checkbox" class="singlechkbox" name="username" value="2"/></td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td><input type="checkbox" class="singlechkbox" name="username" value="3"/></td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-6 col-md-4"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Si vous exécutez le fichier HTML ci-dessus sur le navigateur, vous verrez un tableau contenant 4 lignes. La première ligne est à des fins d’en-tête et la première colonne est pour les cases à cocher. Maintenant, nous allons écrire du code jQuery qui fait de la magie sur les cases à cocher.
Code jQuery qui sélectionne/désélectionne plusieurs cases à cocher
jQuery fournit des méthodes et des événements à l’aide desquels nous pouvons atteindre notre objectif. Ici, j’utiliserai l’ click
événement et la prop
méthode pour effectuer notre tâche.
<script type="text/javascript">
jQuery(function($) {
$('body').on('click', '#selectall', function() {
$('.singlechkbox').prop('checked', this.checked);
});
$('body').on('click', '.singlechkbox', function() {
if($('.singlechkbox').length == $('.singlechkbox:checked').length) {
$('#selectall').prop('checked', true);
} else {
$("#selectall").prop('checked', false);
}
});
});
</script>
Le code ci-dessus vérifie si la case parent est cochée. Si c’est le cas, il coche toutes les cases. Lorsque vous décochez la case parent, toutes les cases enfants sont également décochées.
J’espère que vous comprenez comment sélectionner/désélectionner les cases à cocher à l’aide de jQuery. J’aimerais entendre vos pensées dans la section des commentaires ci-dessous.
Articles Liés
- Télécharger, recadrer et redimensionner l’image à l’aide de jQuery et PHP
- Ajoutez un effet d’image de zoom sur les images de votre site Web
- Comment implémenter jQuery Datepicker avec Timepicker