Wielokrotne pole wyboru Wybierz Odznacz za pomocą jQuery

Ostatnia aktualizacja paź 18, 2021

Zadowolony

jQuery Kod, który zaznacza/odznacza wiele pól wyboru

Tworząc aplikacje webowe zazwyczaj musimy wykonywać operacje CRUD. W widoku listy używaliśmy tabeli z wieloma wierszami. W każdym wierszu trzymamy checkbox, aby zaznaczyć/odznaczyć konkretny wiersz. Te pola wyboru są używane, gdy użytkownik chce usunąć wiersz z bazy danych. Może również mieć funkcję usuwania zbiorczego, w której nadrzędne pole wyboru służyło do zaznaczania/odznaczania podrzędnych pól wyboru.

W tym artykule dowiemy się, jak wykonać zaznaczanie/odznaczanie wielu pól wyboru za pomocą jQuery.

Nasz ostateczny widok jest pokazany na poniższym zrzucie ekranu. Pokazuje pole wyboru rodzica w wierszu nagłówka, a każdy wiersz ma swoje własne pole wyboru.

Zaznaczenie pola rodzica spowoduje zaznaczenie wszystkich pól podrzędnych. A kiedy odznaczymy pole rodzica, pola podrzędne powinny zostać odznaczone. Powiedziawszy to, zobaczmy, jak zastosować wiele pól wyboru zaznacz/odznacz za pomocą jQuery.

Utwórz tabelę próbek w Bootstrap

Na początek potrzebujemy tabeli z kilkoma rekordami wraz z polami wyboru. W poniższym kodzie tworzę fikcyjną tabelę za pomocą Bootstrap. Dodałem również fikcyjne wpisy w tabeli.

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

Jeśli uruchomisz powyższy plik HTML w przeglądarce, zobaczysz tabelę zawierającą 4 wiersze. Pierwszy wiersz jest przeznaczony na nagłówki, a pierwsza kolumna na pola wyboru. Teraz napiszemy kod jQuery, który robi rzeczywistą magię na polach wyboru.

jQuery Kod, który zaznacza/odznacza wiele pól wyboru

jQuery dostarcza metody i zdarzenia, za pomocą których możemy osiągnąć nasz cel. Tutaj użyję clickzdarzenia i propmetody do wykonania naszego zadania.

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

Powyższy kod sprawdza, czy zaznaczone jest nadrzędne pole wyboru. Jeśli tak, to zaznacza wszystkie pola wyboru. Usunięcie zaznaczenia pola wyboru rodzica powoduje również usunięcie zaznaczenia wszystkich pól podrzędnych.

Mam nadzieję, że rozumiesz, jak zaznaczać/odznaczać pola wyboru za pomocą jQuery. Chciałbym usłyszeć twoje przemyślenia w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net