Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/8: Рейтинг темы: голосов - 8, средняя оценка - 4.50
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
1

Выделение всех чекбоксов

21.03.2014, 00:09. Показов 1539. Ответов 16
Метки нет (Все метки)

есть код к чекбоксам
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready( function() {
    // По клику на чекбокс в верхней панели выделяются все чекбоксы
    $('#main_box-head').click(function() {
        if($('#main_box-head').attr('checked')){
            $('#all').attr('checked', true);
            $('#main_box-foot').attr('checked', true);
        } else {
            $('#all').attr('checked', false);
            $('#main_box-foot').attr('checked', false);
        }
    });
    // По клику на чекбокс в нижней панели выделяются все чекбоксы
    $('#main_box-foot').click(function() {
        if($('#main_box-foot').attr('checked')){
            $('#all').attr('checked', true);
            $('#main_box-head').attr('checked', true);
        } else {
            $('#all').attr('checked', false);
            $('#main_box-head').attr('checked', false);
        }
    });
});
и есть такая табличка
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <table class="comment" border="1" rules="rows">
        <thead>
            <tr>
                <td class="td1_title"><input type="checkbox" id="main_box-head"></td>
                <td class="td1_title"></td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td class="td1_title"><input type="checkbox" id="main_box-foot"></td>
                <td class="td1_title"></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                    <td><input type="checkbox" value="111" id="all"></td>
                    <td>111</td>
            </tr>
            <tr>
                    <td><input type="checkbox" value="222" id="all"></td>
                    <td>222</td>
            </tr>
        </tbody>
    </table>
почему, если в таблицы больше 1 строки в тэге tbody(как выше), то все чекбоксы не выделяются(выделяются все, кроме строки с 222?
Заранее благодарен за помощь!

Добавлено через 3 часа 57 минут
нашел ошибку, вместо id="all" нужно class="all"
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.03.2014, 00:09
Ответы с готовыми решениями:

Выделение всех чекбоксов одним
Привет. Имеется список объявлений, рядом с каждым стоит чекбокс с помощью которого можно отметить...

Выделение чекбоксов
Доброго дня! Возможно ли по выделению мышкой поменять значения чекбоксов, как на картинке

Выделение дочерних чекбоксов при клике на родительский (и наоборот) в многоуровневом списке
Как сделать выделение чекбоксов при клике на &quot;родительский&quot;? Список многоуровневный, оформлен с...

Активация всех чекбоксов по одному
Здарова. Имеется таблица, первый тег &lt;tr&gt; - типа заголовка, в котором содержится главный чекбокс....

16
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
07.04.2014, 16:17  [ТС] 2
Что нужно добавить к ниже указанному коду
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready( function() {
    // По клику на чекбокс в верхней панели выделяются все чекбоксы
    $('#main_box-head').click(function() {
        if($('#main_box-head').attr('checked')){
            $('.all').attr('checked', true);
            $('#main_box-foot').attr('checked', true);
        } else {
            $('.all').attr('checked', false);
            $('#main_box-foot').attr('checked', false);
        }
    });
    // По клику на чекбокс в нижней панели выделяются все чекбоксы
    $('#main_box-foot').click(function() {
        if($('#main_box-foot').attr('checked')){
            $('.all').attr('checked', true);
            $('#main_box-head').attr('checked', true);
        } else {
            $('.all').attr('checked', false);
            $('#main_box-head').attr('checked', false);
        }
    });
});
для того чтобы выполнялось следующее действие:
Если выбрал все чекбоксы, а потом один из них отменил, нужно чтобы при этом отменялись чекбоксы в шапке и подвале таблицы, а то у меня как на картинке получается.
Как это реализовать?
Заранее благодарен!
0
Изображения
 
69 / 69 / 50
Регистрация: 25.03.2012
Сообщений: 241
07.04.2014, 18:52 3
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
$(".comment input:checkbox").on('click',function(){
if($(".comment input:checkbox:checked").length()==$(".comment input:checkbox").length())
{
$("#main_box-head input:checkbox").attr('checked', true);
$("#main_box-foot input:checkbox").attr('checked', true);
}
else
{
$("#main_box-head input:checkbox").attr('checked', false);
$("#main_box-foot input:checkbox").attr('checked', false);
}
});
Если выбраны все будут чекнуты подвал и шапка.
0
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
07.04.2014, 22:19  [ТС] 4
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table class="article">
                <thead>
                    <tr>
                        <td class="td1_title"><input type="checkbox" id="main_box-head"></td>
                        ...
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td class="td1_title"><input type="checkbox" id="main_box-foot"></td>
                        ...
                    </tr>
                </tfoot>
                <tbody>
                    {% for i in reversed_article %}
                        <tr>
                            <td><input type="checkbox" value="{{ i.id_article }}" name="checkbox[]" class="all"></td>...
                </tbody>
            </table>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(document).ready( function() {
    // По клику на чекбокс в верхней панели выделяются все чекбоксы
    $('#main_box-head').click(function() {
        if($('#main_box-head').attr('checked')){
            $('.all').attr('checked', true);
            $('#main_box-foot').attr('checked', true);
        } else {
            $('.all').attr('checked', false);
            $('#main_box-foot').attr('checked', false);
        }
    });
    // По клику на чекбокс в нижней панели выделяются все чекбоксы
    $('#main_box-foot').click(function() {
        if($('#main_box-foot').attr('checked')){
            $('.all').attr('checked', true);
            $('#main_box-head').attr('checked', true);
        } else {
            $('.all').attr('checked', false);
            $('#main_box-head').attr('checked', false);
        }
    });
    // Если один из всех выбранных полей не выбран галочка в шапке и подвале убирается
    $(".all").click(function(){
        if($(".all input:checkbox:checked").length() == $(".all input:checkbox").length()) {
            $("#main_box-head").attr('checked', true);
            $("#main_box-foot").attr('checked', true);
        } else {
            $("#main_box-head").attr('checked', false);
            $("#main_box-foot").attr('checked', false);
        }
    });
});
Подстроив под себя...что-то ничего не работает
0
69 / 69 / 50
Регистрация: 25.03.2012
Сообщений: 241
07.04.2014, 22:32 5
У вашей первой таблицы был класс comment а не article, я повешал событие на все чекбоксы в таблице сразу а вешаете на 1 с классом .all, и проверяете вы тот же чекбокс а не все соответственно.
Javascript
1
(".article input:checkbox").on('click',function()
article за место comment сделайте. И ничего больше не меняйте.
0
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
07.04.2014, 22:36  [ТС] 6
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(document).ready( function() {
    // По клику на чекбокс в верхней панели выделяются все чекбоксы
    $('#main_box-head').click(function() {
        if($('#main_box-head').attr('checked')){
            $('.all').attr('checked', true);
            $('#main_box-foot').attr('checked', true);
        } else {
            $('.all').attr('checked', false);
            $('#main_box-foot').attr('checked', false);
        }
    });
    // По клику на чекбокс в нижней панели выделяются все чекбоксы
    $('#main_box-foot').click(function() {
        if($('#main_box-foot').attr('checked')){
            $('.all').attr('checked', true);
            $('#main_box-head').attr('checked', true);
        } else {
            $('.all').attr('checked', false);
            $('#main_box-head').attr('checked', false);
        }
    });
    // Если один из всех выбранных полей не выбран галочка в шапке и подвале убирается
    $(".article input:checkbox").on('click',function(){
if($(".article input:checkbox:checked").length()==$(".article input:checkbox").length())
{
$("#main_box-head input:checkbox").attr('checked', true);
$("#main_box-foot input:checkbox").attr('checked', true);
}
else
{
$("#main_box-head input:checkbox").attr('checked', false);
$("#main_box-foot input:checkbox").attr('checked', false);
}
});
});
в 23 строке ошибка Uncaught TypeError: Object #<Object> has no method 'on'
Ничего не работает...
0
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
09.04.2014, 23:06  [ТС] 7
так что может быть не так?
0
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
13.04.2014, 18:41  [ТС] 8
вставил код, выдает ошибку Uncaught TypeError: undefined is not a function на 1 строку
Javascript
1
2
3
4
5
6
7
8
9
$(".article input:checkbox").on('click',function(){
        if($(".article input:checkbox:checked").length() == $(".article input:checkbox").length()) {
            $("#main_box-head input:checkbox").attr('checked', true);
            $("#main_box-foot input:checkbox").attr('checked', true);
        } else {
            $("#main_box-head input:checkbox").attr('checked', false);
            $("#main_box-foot input:checkbox").attr('checked', false);
        }
    });
Что делать не знаю...
0
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
01.05.2014, 00:43  [ТС] 9
Нашел ошибку: нужно не .length(), а просто .length.
Теперь другая проблема: Возможно ли как-то ниже указанные коды объединить в 1 или сократить?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$('.article input:checkbox').click(function(){
        if($('.article input:checkbox:checked').length == $('.article input:checkbox').length) {
            $('#main_box-head').attr('checked', true);
            $('#main_box-foot').attr('checked', true);
        } else {
            $('#main_box-head').attr('checked', false);
            $('#main_box-foot').attr('checked', false);
        }
    });
    $('.category input:checkbox').click(function(){
        if($('.category input:checkbox:checked').length == $('.category input:checkbox').length) {
            $('#main_box-head').attr('checked', true);
            $('#main_box-foot').attr('checked', true);
        } else {
            $('#main_box-head').attr('checked', false);
            $('#main_box-foot').attr('checked', false);
        }
    });
    $('.comment input:checkbox').click(function(){
        if($('.comment input:checkbox:checked').length == $('.comment input:checkbox').length) {
            $('#main_box-head').attr('checked', true);
            $('#main_box-foot').attr('checked', true);
        } else {
            $('#main_box-head').attr('checked', false);
            $('#main_box-foot').attr('checked', false);
        }
    });
    $('.user input:checkbox').click(function(){
        if($('.user input:checkbox:checked').length == $('.user input:checkbox').length) {
            $('#main_box-head').attr('checked', true);
            $('#main_box-foot').attr('checked', true);
        } else {
            $('#main_box-head').attr('checked', false);
            $('#main_box-foot').attr('checked', false);
        }
    });
Заранее благодарен за помощь!
0
3230 / 2776 / 1395
Регистрация: 15.01.2014
Сообщений: 6,089
01.05.2014, 00:55 10
Цитата Сообщение от Divil Посмотреть сообщение
Возможно ли как-то ниже указанные коды объединить в 1 или сократить?
Покажите всю структуру html, которая относится к данной задаче и не помешает соорудить пример в песочнице.
0
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
01.05.2014, 01:11  [ТС] 11
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<form method="post" action="">
        <table class="category" border="1" rules="rows">
            <thead>
                <tr>
                    <td class="td1_title"><input type="checkbox" id="main_box-head"></td>
                    <td class="td2_title">Заголовок</td>
                    <td class="td3_title">Описание</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td class="td1_title"><input type="checkbox" id="main_box-foot"></td>
                    <td class="td2_title">Заголовок</td>
                    <td class="td3_title">Описание</td>
                </tr>
            </tfoot>
            <tbody>
                {% for i in category %}
                    <tr>
                        <td><input type="checkbox" value="{{ i.id_category }}" class="all"></td>
                        <td>
                            {{ i.title }}
                            <div class="edit-delete">
                                <a href="edit.php?id={{ i.id_category }}&type=ca">Изменить</a>
                                <a href="del.php?id={{ i.id_category }}&type=ca">Удалить</a>
                            </div>
                        </td>
                        <td>{{ i.description }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
подобной структуры, 4 страницы article, comment, category, user.
Различия только в классе таблицы, ну и самих размеров таблицы.
0
3230 / 2776 / 1395
Регистрация: 15.01.2014
Сообщений: 6,089
01.05.2014, 01:44 12
Лучший ответ Сообщение было отмечено Lazy_Den как решение

Решение

Divil, немного сократить можно. Для ваших таблиц добавляете еще какой-нибудь общий класс. В примере я назвал его same_class. И используете такой общий код (тестируем тут):
Javascript
1
2
3
4
5
6
7
8
9
10
var table = $('.same_class'),
    checkAll = $('.td1_title :checkbox', table),
    chbx = $('.all', table),
    cnt = chbx.length;
chbx.on('change', function(){
    checkAll.prop('checked',$('.all:checked').length == cnt);
});
checkAll.on('change', function(){
    checkAll.add(chbx).prop('checked',$(this).prop('checked'));
});
Если таких таблиц на странице больше одной, то уберите id у ваши checkbox-ов: main_box-head и main_box-foot
1
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
06.05.2014, 17:42  [ТС] 13
Допустим, выбрали все чеки, после 1 откл, в шапке и подвале чеки исчезли, а потом передумали и обратно чек вернули и в шапке и подвале должны тоже вкл. Как это(вкл чеков в шапке и подвале при ручной отметки всех чеков таблицы) можно реализовать?
0
3230 / 2776 / 1395
Регистрация: 15.01.2014
Сообщений: 6,089
06.05.2014, 18:43 14
Divil, вы на пример из предыдущего поста смотрели? Что именно там работает не так, как вы хотели?
1
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
06.05.2014, 18:59  [ТС] 15
все так, вопрос нет!
0
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
11.05.2014, 20:13  [ТС] 16
у меня почему-то на 5 строчке ошибку выдает undefined is not a function ...ума не приложу почему, сделал как в примере
0
3230 / 2776 / 1395
Регистрация: 15.01.2014
Сообщений: 6,089
11.05.2014, 20:26 17
Divil, версия библиотеки у вас какая? Скорее всего что старая, ниже 1.7.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.05.2014, 20:26

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как получить значение всех чекбоксов формы?
Чекбоксы находятся внутри формы, генерируются динамически: &lt;div class=&quot;checkbox&quot;&gt; &lt;label&gt;...

Как получить значение всех отмеченных чекбоксов?
как получить значение всех отмеченных чекбоксы

Выделение всех чекбоксов + onClick
У меня такая проблема: есть 3 элемента checkbox, которые при нажатии на каждый из них onClick,...

Сохраняет состояние не всех чекбоксов
есть 2 столпца по 13 чекбоксов. сделал чтоб при отправке формы сохранялось их состояние (отмечен/не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.