checkbox "select all" jquery and Cakephp

Asked

Viewed 410 times

3

Hi, I have one foreach in a table that lists several checkboxes. I need to do a function jquery that by clicking on the checkbox of <th> selecione todos the next checkboxes <td>. Look at my code:

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 }; ?>

up there is the listing of my checkboxes

below is my jquery function:

 $('.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>

A screenshot of the checks on the screen.

inserir a descrição da imagem aqui

here the rendered html.

inserir a descrição da imagem aqui

but when you click on the checkbox that triggers this function, nothing happens. I removed the jquery code from this example: http://bootsnipp.com/snippets/WPvrj

Can someone help me?

jquery checkbox cakephp-3

  • Just one question, the locale of this code is released within html? for Jquery to work, it must be contained within the <script></script tag>

  • yeah, it is. I just didn’t put it in the code here so it wouldn’t be too much, you know?

  • What is the structure of this <table>? I don’t understand what you mean by "clicking on the <th> checkbox select all checkboxes of the next <td>". Which one is next td in your structure?

  • Oops, I tweaked the code. I wanted to delete, but I forgot to close some tags.

  • 1

    @It would be interesting to put the rendered HTML and specify which ones <td> which must be marked when .all is also marked.

  • Guy just looks. There’s an if I mount th which generates input[class='all'] which is a checbox. By clicking on this if check, I want to select all td that are off the if, which is a list then of all options.

  • 1

    This is very simple to do, but it’s easier to give an example for your case if you post the rendered html, as suggested by @Sergio

  • beauty, I put a print of html and screen.

  • 1

    That makes it clearer! Is this what you’re looking for? -> https://jsfiddle.net/azue5509/

  • It’s almost that, only his code he selects all the screen. Is there any way to limit him to select only until the next th ? I updated the images to make them clearer

  • 1

    @Estáciodifabio have several trwith th in the same table is invalid HTML. You can give different classes to these elements?

  • Yes I just did this to test, I put the class 'all' for the header checks and the class 'each' for each check of the 'td'. But I couldn’t spin.

Show 7 more comments

1 answer

1

First, you must have something to identify the checkbox which will be selected, may be a common class, may be within a div or any other block. Assign the event change at the checkbox who will be responsible for selecting all and changing the behavior of change to mark/unmark.

The main item is to have some way to identify this checkbox group, see the example with the checkbox inside a 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>

  • I tried to adapt this to my structure but did not roll: $('body'). on('change', '.all', Function() { $(this). next('tr'). find( 'input[type=checkbox]'). prop('checked', this.checked); //jQuery <= 1.6 use attr });

Browser other questions tagged jquery checkbox cakephp-3

You are not signed in. Login or sign up in order to post.