...
✅ WEB і WordPress новини, теми, плагіни. Тут ми ділимося порадами і кращими рішеннями для сайтів.

Кілька прапорців Виберіть Скасувати вибір за допомогою jQuery

31

Під час розробки веб-додатків нам зазвичай потрібно виконувати операції CRUD. Для подання списку ми раніше мали таблицю з декількома рядками. У кожному рядку ми зберігаємо прапорець, щоб позначити / зняти прапорець з певного рядка. Ці прапорці використовуються, коли користувач бажає видалити рядок з бази даних. Він також може мати функцію масового видалення, коли батьківський прапорець використовував для вибору / скасування вибору дочірніх прапорців.

У цій статті ми вивчаємо, як виконати вибір / скасування виділення декількох прапорців за допомогою jQuery.

Наш остаточний вигляд показаний на скріншоті нижче. Він відображає батьківський прапорець у рядку заголовка, і кожен рядок має свій власний прапорець.

Якщо встановити батьківський прапорець, буде позначено всі дочірні прапорці. І коли ми знімаємо батьківський прапорець, дочірні прапорці повинні бути знятими. Сказавши це, давайте подивимося, як застосувати декілька прапорців вибору / скасування виділення за допомогою jQuery.

Створіть зразкову таблицю в Bootstrap

Для початку нам потрібна таблиця з деякими записами разом із прапорцями. У наведеному нижче коді я створюю фіктивну таблицю за допомогою Bootstrap. Я також додав фіктивні записи в таблицю.

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

Якщо запустити вищезазначений файл HTML у браузері, ви побачите таблицю, яка містить 4 рядки. Перший рядок призначений для заголовка, а перший стовпець – для прапорців. Тепер ми збираємося писати код jQuery, який робить справжню магію на прапорцях.

Код jQuery, який вибирає / скасовує вибір кількох прапорців

jQuery надає методи та події, за допомогою яких ми можемо досягти своєї мети. Тут я буду використовувати clickподію та propметод для виконання нашого завдання.

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

Наведений вище код перевіряє, чи встановлений батьківський прапорець. Якщо це так, тоді він ставить усі прапорці. Коли ви знімаєте батьківський прапорець, він також знімає всі дочірні прапорці.

Сподіваюся, ви розумієте, як робити / відміняти прапорці за допомогою jQuery. Я хотів би почути ваші думки в розділі коментарів нижче.

Пов’язані статті

Джерело запису: artisansweb.net

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі