Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JS Главный чекбок над группами чекбоксов / 6 сообщений из 6, страница 1 из 1
02.12.2015, 23:35
    #39118855
TemichRus
TemichRus
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS Главный чекбок над группами чекбоксов
Добрый вечер. Помогите пожалуйста. Пытаюсь сделать группы чекбоксов так, чтоб над всеми этими чекбоксами был главный "Выделить все".
Код: javascript
1.
2.
3.
4.
5.
6.
$(document).ready(function() { 
                $(".all").on("change", function() {
                    var groupId = $(this).data('id');
                    $('.one[data-id="' + groupId + '"]').prop("checked", this.checked);
                });
            });


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<h2>Группа 1</h2>
        <input type="checkbox" class="all" data-id="d1" title="Выбрать все"/>Общий<br/>
        <input type="checkbox" class="one" data-id="d1" title="Выбрать"/><br/>
        <input type="checkbox" class="one" data-id="d1" title="Выбрать"><br/>
        <input type="checkbox" class="one" data-id="d1" title="Выбрать"/>

        <h2>Группа 2</h2>
        <input type="checkbox" class="all" data-id="d2" title="Выбрать все"/>Общий<br/>
        <input type="checkbox" class="one" data-id="d2" title="Выбрать"/><br/>
        <input type="checkbox" class="one"data-id="d2" title="Выбрать"/><br/>
        <input type="checkbox" class="one" data-id="d2" title="Выбрать"/>


Получилось создать группы, а как создать чекбокс "Выделить всё", который будет выделять и снимать выделение с Группы 1 и Группы 2 одновременно.
Спасибо большое.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.12.2015, 09:38
    #39118997
kunaksergey
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS Главный чекбок над группами чекбоксов
TemichRus,
ну сделайте так:
$(".main").on("change", function() {
$('.all').prop("checked", this.checked);
$('.one').prop("checked", this.checked);

});
где ".main" -селектор для главного чекбокса
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.12.2015, 12:22
    #39119282
TemichRus
TemichRus
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS Главный чекбок над группами чекбоксов
kunaksergey,

Спасибо, то что нужно. Вот только проблема. Когда выделены все, вдруг я снимаю какой то флаг, а флаг main не убирается.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.12.2015, 12:28
    #39119289
kunaksergey
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS Главный чекбок над группами чекбоксов
TemichRus,

повесьте событие на класс one
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.12.2015, 15:32
    #39119580
TemichRus
TemichRus
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS Главный чекбок над группами чекбоксов
kunaksergey,

Я разобрался спасибо. А как теперь теперь сделать так, чтобы при снятом флаге "все" отметить вручную каждый и после этого флаг "все" отмечается автоматически? Нужно перебрать каждый чекбокс на "checked"?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.12.2015, 00:01
    #39120023
TemichRus
TemichRus
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JS Главный чекбок над группами чекбоксов
Получилось вот так.
Код: 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.
37.
38.
39.
40.
41.
$(document).ready(function() { 
                $(".all").on("change", function() {
                    var groupId = $(this).data('id');
                    if($('.main').attr("checked")=='checked'){
                       $('.main').prop("checked",this.checked);
                    }
                    $('.one[data-id="' + groupId + '"]').prop("checked", this.checked);
                });
                $(".main").on("change",function() {
                   $('.all').prop("checked",this.checked);
                   $('.one').prop("checked",this.checked);
                });
                $(".one").on("change",function() {
                   var groupId = $(this).data('id');
                   if($('.all[data-id="' + groupId + '"]').attr("checked")=='checked' && $('.main').attr("checked")=='checked'){
                       $('.all[data-id="' + groupId + '"]').prop("checked",this.checked);
                       $('.main').prop("checked",this.checked);
                   }
                   if($('.all[data-id="' + groupId + '"]').attr("checked")=='checked'){
                       $('.all[data-id="' + groupId + '"]').prop("checked",this.checked);
                   }
                        var groupId = $(this).data('id');
                        var list = null, flag = true;
                        list = $('#'+ groupId +' input:checkbox');
                            list.each( function() {
                                if($(this).attr("checked")!='checked')
                                    flag=false;
                            });
                        if(flag)
                        {
                            var groupId = $(this).data('id');
                            if($('.all[data-id="' + groupId + '"]').attr("checked")!='checked')
                                $('.all[data-id="' + groupId + '"]').prop("checked",this.checked);
                        }

                });
                $(".all").on("change", function() {
                    var groupId = $(this).data('id');
                    $('.one[data-id="' + groupId + '"]').prop("checked", this.checked);
                });
            });


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<h2>Группа 1</h2>        
        <input type="checkbox" class="main" title="Все"/>Все<br>
        <input type="checkbox" class="all" data-id="d1" title="Выбрать все"/>Общий<br/>
        <div id="d1">
        <input type="checkbox" class="one" data-id="d1" title="Выбрать"/><br/>
        <input type="checkbox" class="one" data-id="d1" title="Выбрать"><br/>
        <input type="checkbox" class="one" data-id="d1" title="Выбрать"/>
        </div>
        <h2>Группа 2</h2>
        <input type="checkbox" class="all" data-id="d2" title="Выбрать все"/>Общий<br/>
        <div id="d2">
        <input type="checkbox" class="one" data-id="d2" title="Выбрать"/><br/>
        <input type="checkbox" class="one" data-id="d2" title="Выбрать"/><br/>
        <input type="checkbox" class="one" data-id="d2" title="Выбрать"/>
        </div>


Я думаю получилось много лишнего.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JS Главный чекбок над группами чекбоксов / 6 сообщений из 6, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 502ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1445579]:
 0ms
get settings:
 9ms
get forum list:
 10ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 200ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 20ms
get tp. blocked users:
 1ms
others: 248ms
total:  502ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]