Странности с отметками многоуровневых checkbox

@lifee · Регистрация: 04.04.2014

Студворк — интернет-сервис помощи студентам

Всем привет.
Есть такая структура чекбоксов:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
<section class="jolo-settings">
            <form action="" class="uk-form">
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">All</div><div class="value"><input type="checkbox" name="allcategories"></div></label>
                </div>
            </div>
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">Sport</div><div class="value"><input type="checkbox" name="allsport"></i></div></label>
                    <label class="item sub"><div class="name">Tennis</div><div class="value"><input type="checkbox" name="sport1"></div></label>
                    <label class="item sub"><div class="name">Floorball</div><div class="value"><input type="checkbox" name="sport2"></div></label>
                    <label class="item sub"><div class="name">Hockey</div><div class="value"><input type="checkbox" name="sport3"></div></label>
                    <label class="item sub"><div class="name">Boxing</div><div class="value"><input type="checkbox" name="sport4"></div></label>
                    <label class="item sub"><div class="name">Beach volleyball</div><div class="value"><input type="checkbox" name="sport5"></div></label>
                </div>
            </div>
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">Party</div><div class="value"><input type="checkbox" name="allparty"></div></label>
                    <label class="item sub"><div class="name">Bar</div><div class="value"><input type="checkbox" name="party1"></div></label>
                    <label class="item sub"><div class="name">Cinema</div><div class="value"><input type="checkbox" name="party2"></div></label>
                    <label class="item sub"><div class="name">Club</div><div class="value"><input type="checkbox" name="party3"></div></label>
                    <label class="item sub"><div class="name">Bowling</div><div class="value"><input type="checkbox" name="party4"></div></label>
                    <label class="item sub"><div class="name">Billiards</div><div class="value"><input type="checkbox" name="party5"></div></label>
                    <label class="item sub"><div class="name">Poker</div><div class="value"><input type="checkbox" name="party6"></div></label>
                </div>
            </div>
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">Help</div><div class="value"><input type="checkbox" name="help"></div></label>
                </div>
            </div>
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">Gift</div><div class="value"><input type="checkbox" name="gift"></div></label>
                </div>
            </div>
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">Rent</div><div class="value"><input type="checkbox" name="rent"></div></label>
                </div>
            </div>
            </form>
        </section>

Есть категории, подкатегории и "All"(выделить все).
К ним написан такой jq:

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
$(document).ready(function() {
 
        $('input[name="allcategories"]').change(function() {
            $('input:checkbox').prop('checked', this.checked);
        });
        $('.box:not(:first-child) input:checkbox').change(function() {
            if($('.box:not(:first-child) input:checkbox').prop('checked')) {
                $('input[name="allcategories"]').prop('checked', this.checked);
            } else {
                $('input[name="allcategories"]').removeAttr('checked');
            };
        });
 
        $('input[name="allsport"]').change(function() {
            $('input[name^="sport"]').prop('checked', this.checked);
        });
        $('input[name^="sport"]').change(function() {
            if($('input[name^="sport"]').is(':not(:checked)')) {
                $('input[name="allsport"]').removeAttr('checked');
            } else {
                $('input[name="allsport"]').prop('checked', this.checked);
            };
        });
 
        $('input[name="allparty"]').change(function() {
            $('input[name^="party"]').prop('checked', this.checked);
        });
        $('input[name^="party"]').change(function() {
            if($('input[name^="party"]').is(':not(:checked)')) {
                $('input[name="allparty"]').removeAttr('checked');
            } else {
                $('input[name="allparty"]').prop('checked', this.checked);
            };
        });
 
    });

Суть:

1) При нажатии на "All" должны выделяться все категории и подкатегории, что собственно работает нормально.

2) При нажатии на категорию, например "Sport", должны выделяться подкатегории данной категории. Это тоже работает нормально.

3) Если выделены все чекбоксы, то при снятии флажка с категории, соответственно должны сниматься флажки с подкатегорий и с "All" и наоборот. Это, опять же, работает нормально.

4) Если выделены все чекбоксы, то при снятии флажка с подкатегории, должен сниматься флажок с категории и с "All". Это работает, НО если опять поставить на подкатегорию флажок, то на "All" флажок уже не возвращается.
При чем эта проблема распространяется только на категорию "Sport", что странно.

Так же, во время написания этой темы, обнаружил еще одну проблему - если снять флажок с категории "Party", а потом поставить флажок на ее подкатегорию, то поставится флажок на "All", хотя его там не должно быть.

Целый день пытаюсь поправить, но все напрасно(
Помогите пожалуйста решить эту проблему.
Спасибо.

Вот ссылка на демо, тут более понятно как это работает - https://jsfiddle.net/0vf3z4ku/2/

@amadey18 · 05.03.2015, 12:42

Сообщение от lifee

4) Если выделены все чекбоксы, то при снятии флажка с подкатегории, должен сниматься флажок с категории и с "All". Это работает, НО если опять поставить на подкатегорию флажок, то на "All" флажок уже не возвращается.

При изменении поддиректории совершенно нет проверки на изменение. Можно сделать такой вот костыль:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
$(document).ready(function() {
 
        $('input[name="allcategories"]').change(function() {
            $('input:checkbox').prop('checked', this.checked);
        });
        $('.box:not(:first-child) input:checkbox').change(function() {
            if($('.box:not(:first-child) input:checkbox').prop('checked')) {
                $('input[name="allcategories"]').prop('checked', this.checked);
            } else {
                $('input[name="allcategories"]').prop('checked', false);
            };
        });
 
        $('input[name="allsport"]').change(function() {
            $('input[name^="sport"]').prop('checked', this.checked);
        });
        $('input[name^="sport"]').change(function() {
            if($('input[name^="sport"]').is(':not(:checked)')) {
                $('input[name="allsport"]').prop('checked', false);
            } else {
                $('input[name="allsport"]').prop('checked', this.checked);
                checkAll();
            };
        });
 
        $('input[name="allparty"]').change(function() {
            $('input[name^="party"]').prop('checked', this.checked);
        });
        $('input[name^="party"]').change(function() {
            if($('input[name^="party"]').is(':not(:checked)')) {
                $('input[name="allparty"]').prop('checked', false);
            } else {
                $('input[name="allparty"]').prop('checked', this.checked);
                checkAll();
            };
        });
    
    function checkAll(){
        if($('input[name="allsport"]').prop('checked') &&
          $('input[name="allparty"]').prop('checked') &&
          $('input[name="help"]').prop('checked') && 
          $('input[name="gift"]').prop('checked') &&
          $('input[name="rent"]').prop('checked') ){
            $('input[name="allcategories"]').prop('checked', true);
        }
        else
        {
            $('input[name="allcategories"]').prop('checked', false);            
        }
    };
    
 
 
    });

правда в функции checkAll придется проверять каждую группу, но можно им присвоить отдельный класс, так должно быть проще, ибо категории будут добавляться и удалятся. https://jsfiddle.net/0vf3z4ku/6/
Добавить категориям класс group

JavaScript
1
2
3
4
5
6
7
8
9
10
function checkAll(){
        $('.group').each(function(){
            if(!$(this).prop('checked'))
            {
                $('input[name="allcategories"]').prop('checked', false); 
                return; // если хоть 1 вернул false - то выходим
            }            
        });
        $('input[name="allcategories"]').prop('checked', true);
};

Сообщение от lifee

Так же, во время написания этой темы, обнаружил еще одну проблему - если снять флажок с категории "Party", а потом поставить флажок на ее подкатегорию, то поставится флажок на "All", хотя его там не должно быть.

Заметил сразу же, но пока не понял как решить.

Добавлено через 28 минут
lifee, ммм, прошу прощения, вот немного доработанная: https://jsfiddle.net/0vf3z4ku/8/

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
33
34
35
36
37
38
39
40
41
42
43
44
45
<section class="jolo-settings">
            <form action="" class="uk-form">
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">All</div><div class="value"><input type="checkbox" name="allcategories" ></div></label>
                </div>
            </div>
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">Sport</div><div class="value"><input type="checkbox" name="allsport" class="group"></i></div></label>
                    <label class="item sub"><div class="name">Tennis</div><div class="value"><input type="checkbox" name="sport1"></div></label>
                    <label class="item sub"><div class="name">Floorball</div><div class="value"><input type="checkbox" name="sport2"></div></label>
                    <label class="item sub"><div class="name">Hockey</div><div class="value"><input type="checkbox" name="sport3"></div></label>
                    <label class="item sub"><div class="name">Boxing</div><div class="value"><input type="checkbox" name="sport4"></div></label>
                    <label class="item sub"><div class="name">Beach volleyball</div><div class="value"><input type="checkbox" name="sport5"></div></label>
                </div>
            </div>
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">Party</div><div class="value"><input type="checkbox" name="allparty" class="group"></div></label>
                    <label class="item sub"><div class="name">Bar</div><div class="value"><input type="checkbox" name="party1"></div></label>
                    <label class="item sub"><div class="name">Cinema</div><div class="value"><input type="checkbox" name="party2"></div></label>
                    <label class="item sub"><div class="name">Club</div><div class="value"><input type="checkbox" name="party3"></div></label>
                    <label class="item sub"><div class="name">Bowling</div><div class="value"><input type="checkbox" name="party4"></div></label>
                    <label class="item sub"><div class="name">Billiards</div><div class="value"><input type="checkbox" name="party5"></div></label>
                    <label class="item sub"><div class="name">Poker</div><div class="value"><input type="checkbox" name="party6"></div></label>
                </div>
            </div>
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">Help</div><div class="value"><input type="checkbox" name="help" class="group"></div></label>
                </div>
            </div>
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">Gift</div><div class="value"><input type="checkbox" name="gift" class="group"></div></label>
                </div>
            </div>
            <div class="box">
                <div class="items">
                    <label class="item"><div class="name">Rent</div><div class="value"><input type="checkbox" name="rent" class="group"></div></label>
                </div>
            </div>
            </form>
        </section>

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
42
43
44
45
46
47
48
49
50
51
52
$(document).ready(function() {
 
        $('input[name="allcategories"]').change(function() {
            $('input:checkbox').prop('checked', this.checked);
        });
        $('.box:not(:first-child) input:checkbox').change(function() {
            checkAll();
        });
 
        $('input[name="allsport"]').change(function() {
            $('input[name^="sport"]').prop('checked', this.checked);
        });
        $('input[name^="sport"]').change(function() {
            if($('input[name^="sport"]').is(':not(:checked)')) {
                $('input[name="allsport"]').prop('checked', false);
                checkAll();
            } else {
                $('input[name="allsport"]').prop('checked', this.checked);
                checkAll();
            };
        });
 
        $('input[name="allparty"]').change(function() {
            $('input[name^="party"]').prop('checked', this.checked);
        });
        $('input[name^="party"]').change(function() {
            if($('input[name^="party"]').is(':not(:checked)')) {
                $('input[name="allparty"]').prop('checked', false);
                checkAll();
            } else {
                $('input[name="allparty"]').prop('checked', this.checked);
                checkAll();
            };
        });
    
    function checkAll(){
        var isAll = true;
        $('.group').each(function(){
            if(!$(this).prop('checked'))
            {
                $('input[name="allcategories"]').prop('checked', false); 
                isAll = false;
                return false; // если хоть 1 вернул false - то выходим
            }            
        });
        if(isAll)
            $('input[name="allcategories"]').prop('checked', true);
    };
    
 
 
    });

CSS
1
2
3
4
5
6
7
8
.jolo-settings {margin: 0;}
.jolo-settings .box .title {text-transform: uppercase; font-size: 16px; margin: 15px 15px 0 15px;}
.jolo-settings .box .items {background-color: #fcfcfc; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 0 15px; margin-top: 15px;}
.jolo-settings .box .items .item {text-decoration: none; padding: 10px 0; border-bottom: 1px solid #ddd; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;}
.jolo-settings .box .items .item:last-child {border: none;}
.jolo-settings .box .items .item .name {font-weight: bold; color: #000;}
.jolo-settings .box .items .item.sub .name {padding-left: 10px;}
.jolo-settings .box .items .item .value {color: gray; text-align: right;}

@lifee · 05.03.2015, 18:36 **[ТС]**

Спасибо большое) теперь разобрался.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@lifee 0 / 0 / 0 Регистрация: 04.04.2014 Сообщений: 10
	05.03.2015, 18:36 [ТС]
	Спасибо большое) теперь разобрался. 0