0

Есть таблица в которой в одной из колонок стоят чекбоксы для выбора строки

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

когда выбираешь одну строку или несколько рисуется галочка, с помощью jquery добавляться класс .checked { background-position: -17px 0px;}

$(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'); 
        }

Но я не могу добиться когда нажимаешь на чекбокс в шапке таблицы, чтоб добавлялся класс checked во все span таблицы. И я не уверен что и этот код jquery написал правильно хотя он и работает.

0

2 ответа 2

4

Задачу можно решить так: (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');
    });
});

вот пример http://jsfiddle.net/3AEQf/7/

7
  • а есть другие варианты, у меня firefox завис от этого кода
    – zinteco
    18 июн 2014 в 15:26
  • Вы могли свой код модифицировать.... чтоб при клике на выделить все можно было и снять все! И сам чекбокс тоже чтоб был выделен, а у вас кнопка.
    – zinteco
    18 июн 2014 в 16:02
  • 1
    я мог бы. а вы пробовали? 18 июн 2014 в 16:03
  • [Такой вариант][1] сойдёт? [1]: jsfiddle.net/Deonis/3AEQf/5
    – Deonis
    18 июн 2014 в 16:34
  • 1
    не правильно. правильно как-то так jsfiddle.net/3AEQf/7 и вот эта ссылка для получасового ознакомления learn.javascript.ru/#book-toc-767 18 июн 2014 в 20:27
1

Лови друган решение своей задачи, просто вставь в свой HTML и увидишь что всё работает. По аналогии сопоставь со своим кодом. Добра тебе

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.