Casella di controllo multipla Seleziona Deseleziona usando jQuery

Durante lo sviluppo di applicazioni Web, di solito è necessario eseguire operazioni CRUD. Per la visualizzazione elenco, avevamo una tabella con più righe. In ogni riga, manteniamo una casella di controllo per selezionare/deselezionare una riga specifica. Queste caselle di controllo sono in uso quando l’utente desidera eliminare una riga dal database. Potrebbe anche avere la funzionalità di eliminazione in blocco in cui la casella di controllo genitore era utilizzata per selezionare/deselezionare le caselle di controllo figlio.

In questo articolo, studiamo come eseguire selezionare/deselezionare più caselle di controllo utilizzando jQuery.

La nostra vista finale è come mostrato nello screenshot qui sotto. Mostra la casella di controllo padre nella riga di intestazione e ogni riga ha la propria casella di controllo.

Selezionando la casella di controllo genitore verranno selezionate tutte le caselle di controllo figlio. E quando deselezionamo la casella di controllo genitore, le caselle di controllo figlio dovrebbero essere deselezionate. Detto questo vediamo come applicare più checkbox seleziona/deseleziona usando jQuery.

Crea una tabella di esempio in Bootstrap

Per iniziare, abbiamo bisogno di una tabella con alcuni record insieme alle caselle di controllo. Nel codice seguente, sto creando una tabella fittizia usando Bootstrap. Ho anche aggiunto voci fittizie nella tabella.

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

Se esegui il file HTML sopra nel browser, vedrai una tabella che contiene 4 righe. La prima riga è per scopi di intestazione e la prima colonna è per le caselle di controllo. Ora, scriveremo il codice jQuery che fa la magia reale sulle caselle di controllo.

Codice jQuery che seleziona/deseleziona più caselle di controllo

jQuery fornisce metodi ed eventi con cui possiamo raggiungere il nostro obiettivo. Qui userò l’ clickevento e il propmetodo per eseguire il nostro compito.

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

Il codice sopra controlla se la casella di controllo genitore è selezionata. Se lo è, seleziona tutte le caselle di controllo. Quando deselezioni la casella di controllo genitore, deseleziona anche tutte le caselle di controllo figlio.

Spero che tu capisca come selezionare/deselezionare le caselle di controllo usando jQuery. Mi piacerebbe sentire i tuoi pensieri nella sezione commenti qui sotto.

articoli Correlati

• Carica, ritaglia e ridimensiona l’immagine utilizzando jQuery e PHP
• Aggiungi l’effetto immagine zoom alle immagini del tuo sito web
• Come implementare jQuery Datepicker con Timepicker