...
Actualités WEB et WordPress, thèmes, plugins. Ici, nous partageons des conseils et les meilleures solutions de sites Web.

Case à cocher multiple Sélectionnez Désélectionnez à l’aide de jQuery

155

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 propmé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

Source d’enregistrement: artisansweb.net

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails