There is a table in which in one of the columns are checkboxes for row selection

<table class="table table-bordered table-checks"> <thead> <tr> <th> <div id="all" class="checker"> <span> <input id="all" class="styled" type="checkbox" name="checkRow" style="opacity: 0;"> </span> </div> </th> <th>ID</th> <th>Автар</th> <th>Название</th> <th>URL</th> <th>Дата создания</th> <th>Статус</th> </tr> </thead> <tbody> <?php foreach($latest_materials as $item): ?> <tr data-id="<?=$item['material_id']?>"> <td> <div id="" class="checker"> <span> <input class="styled" type="checkbox" name="checkRow" style="opacity: 0;"> </span> </div> </td> <td> <?=$item[ 'material_id']?> </td> <td> <?=$item[ 'author']?> </td> <td> <?=$item[ 'title']?> </td> <td> <?=$item[ 'material_id']?> </td> <td> <?=$item[ 'date']?> </td> <td></td> </tr> <?php endforeach; ?> </tbody> </table>

when you select a single line or a tick is drawn, the class .checked { background-position: -17px 0px;} added using jquery

 $(document).on('click','input:checkbox',function(e) { if($(this).is(':checked')){ $tr = $(this).parents('span'); $tr.addClass('checked'); } else { $tr = $(this).parents('span'); $tr.removeClass('checked'); }

But I can not achieve when you click on the checkbox in the header of the table to add the checked class to all table spans. And I'm not sure that this jquery code has written correctly even though it works.

    2 answers 2

    The problem can be solved like this: (upd)

     $(document).ready(function(){ var table = $('table.table-checks'); table .on('change', '> tbody input:checkbox',function() { $(this).closest('span').toggleClass('checked', $(this).is(':checked')); }) .on('change', '#all', function(){ $('> tbody input:checkbox', table).prop('checked', $(this).is(':checked')).trigger('change'); }); });

    Here is an example http://jsfiddle.net/3AEQf/7/

    • and there are other options, my firefox depended on this code - zinteco
    • You could modify your code .... so that when you clicked on, you could select everything and remove everything! And the checkbox itself, too, to be highlighted, and you have a button. - zinteco 4:02 pm
    • one
      I could. Have you tried? - nörbörnën
    • [This option] [1] will come down? [1]: jsfiddle.net/Deonis/3AEQf/5 - Deonis
    • one
      not properly. jsfiddle.net/3AEQf/7 is correct, and this link is for a half-hour reading. learn.javascript.ru/#book-toc-767 - nörbörnën

    Catch a friend's solution to your problem, just paste it into your HTML and see that everything works. By analogy, match with your code. All the best to you

     <!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="UTF-8"> <title>JavaScript уроки</title> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> </head> <body> <script type="text/javascript"> $(function () { $("#selall").click(function () { if (!$("#selall").is(":checked")){ $(".checkbox").removeAttr("checked"); } else{ $(".checkbox").prop("checked","checked"); } }); }); </script> <label><input type="checkbox" id="selall"> Выделить всё</label> <br> <label><input type="checkbox" name="checks" class="checkbox" value="1"> Чекбокс 1</label> <br> <label><input type="checkbox" name="checks" class="checkbox" value="2"> Чекбокс 2</label> <br> <label><input type="checkbox" name="checks" class="checkbox" value="3"> Чекбокс 3</label> </body> </html>