Multiple Checkbox Select Deselect using jQuery

Ao desenvolver aplicativos da web, geralmente precisamos realizar operações CRUD. Para a visualização de lista, costumávamos ter uma tabela com várias linhas. Em cada linha, mantemos uma caixa de seleção para marcar / desmarcar uma linha específica. Essas caixas de seleção são usadas quando o usuário deseja excluir uma linha do banco de dados. Ele também pode ter a funcionalidade de exclusão em massa onde a caixa de seleção pai é usada para marcar / desmarcar as caixas de seleção filho.

Neste artigo, estudamos como selecionar / desmarcar várias caixas de seleção usando jQuery.

Nossa visão final é mostrada na imagem abaixo. Ele mostra a caixa de seleção pai na linha do título e cada linha tem sua própria caixa de seleção.

Selecionar a caixa de seleção pai marcará todas as caixas de seleção filho. E quando desmarcamos a caixa de seleção pai, as caixas de seleção filho devem ser desmarcadas. Dito isso, vamos ver como aplicar várias caixas de seleção, selecionar / desmarcar usando jQuery.

Criar Tabela de Amostra no Bootstrap

Para começar, precisamos de uma tabela com alguns registros junto com as caixas de seleção. No código a seguir, estou criando uma tabela fictícia usando o Bootstrap. Eu também adicionei entradas fictícias na tabela.

<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 você executar o arquivo HTML acima no navegador, verá uma tabela que contém 4 linhas. A primeira linha é para fins de título e a primeira coluna é para as caixas de seleção. Agora, vamos escrever o código jQuery que faz mágica real nas caixas de seleção.

Código jQuery que seleciona / desmarca várias caixas de seleção

jQuery fornece métodos e eventos com os quais podemos atingir nosso objetivo. Aqui, usarei o clickevento e o propmétodo de para realizar nossa tarefa.

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

O código acima verifica se a caixa de seleção pai está marcada. Se for, ele marca todas as caixas de seleção. Quando você desmarca a caixa de seleção pai, também desmarca todas as caixas de seleção filho.

Espero que você entenda como marcar / desmarcar caixas de seleção usando jQuery. Eu gostaria de ouvir sua opinião na seção de comentários abaixo.

Artigos relacionados

• Carregar, cortar e redimensionar imagem usando jQuery e PHP
• Adicione efeito de imagem de zoom às imagens do seu site
• Como implementar jQuery Datepicker com Timepicker