3

Oi, eu tenho um foreach num table que lista vários checkboxes. Preciso fazer uma função jquery que ao clicar no checkbox do <th> selecione todos os checkboxes do próximo <td>. Olhe meu código:

foreach ($controllersActions as $acaoControlador) {
   if ($controlador != $controladorAtual) {
                            $controlador = $controladorAtual;
                            ?>
                        <tr>
                            <th colspan="2">
                                <?php 
                                echo $this->Form->checkbox('all', [
                                    'hiddenField' => false,
                                    'class' => 'all',

                                ]);
                                ?>
                                <?= Inflector::humanize($controladorAtual) ?>
                            </th>   
                        </tr>
                        <?php
                        }
                        ?>
                        <tr>
                            <td style="padding-left: 20px; width: 10px;">
                                <?=
                                $this->Form->checkbox('permissoes[]', [
                                    'hiddenField' => false,
                                    'value' => $acaoControlador,
                                    marcado($entidade, $acaoControlador)
                                ]);
                                ?>
                            </td>
                            <td><?= Inflector::humanize($acaoAtual); ?></td>
                        </tr>
                    <?php }; ?>

ai em cima esta a listagem dos meus checkboxes

em baixo está a minha função jquery:

 $('.all').on('click', function(e){
            $this = this;

            $.each($(this).children('tr td').find('checkbox'), function(i, item){
                alert('oi');
              $(item).prop('checked', $this.checked);
            });

          });
      <?= Inflector::humanize($controladorAtual) ?>
         </th>  
  </tr>

Uma imagem dos checks na tela.

inserir a descrição da imagem aqui

aqui o html renderizado.

inserir a descrição da imagem aqui

porém ao clicar no checkbox que dispara essa função, nada acontece. retirei o código jquery desse exemplo: http://bootsnipp.com/snippets/WPvrj

Alguém pode me ajudar?

12
  • Só uma pergunta, a localidade desse código ta solto dentro do html? para que o Jquery funcione, ele deve estar contido dentro da tag <script></script>
    – Ruggi
    Commented 14/01/2016 às 11:28
  • 1
    @EstácioDiFabio seria interessante colocares o HTML renderizado e especificar quais os <td> que devem ser marcados quando esse .all estiver também marcado.
    – Sergio
    Commented 14/01/2016 às 11:41
  • 1
    Isso é bem simples de se fazer, mas fica mais fácil dar um exemplo para seu caso se postar o html renderizado, como sugerido pelo @Sergio Commented 14/01/2016 às 11:49
  • 1
    Assim ficou mais claro! É isto que procuras? -> jsfiddle.net/azue5509
    – Sergio
    Commented 14/01/2016 às 11:56
  • 1
    @EstácioDiFabio ter várias trcom th na mesma tabela é HTML inválido. Podes dar classes diferentes a esses elementos?
    – Sergio
    Commented 14/01/2016 às 12:22

1 Resposta 1

1

Primeiro, você deve ter algo para identificar os checkbox que serão selecionados, pode ser uma classe em comum, podem estar dentro de uma div ou outro bloco qualquer. Atribua o evento change ao checkbox que será responsável por selecionar todos e altere o comportamento do change para marcar/desmarcar.

O item principal é ter alguma maneira de identificar esse grupo de checkbox, veja o exemplo com os checkbox dentro de uma div.

$('body').on('change', '.all', function() {
  $(this).next('div').find('input[type=checkbox]').prop('checked', this.checked); //jQuery <= 1.6 usar attr
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="all" />
<div id="minhaDiv">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>
<input type="checkbox" class="all" />
<div id="minhaOutraDiv">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

1
  • eu tentei adaptar isso para a minha estrutura mas não rolou: $('body').on('change', '.all', function() { $(this).next('tr').find( 'input[type=checkbox]').prop('checked', this.checked); //jQuery <= 1.6 usar attr }); Commented 14/01/2016 às 13:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .