Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/15: Рейтинг темы: голосов - 15, средняя оценка - 4.80
0 / 0 / 1
Регистрация: 17.10.2016
Сообщений: 15

Главный чекбокс который выбирает все остальные или снимает выделение

03.12.2016, 01:02. Показов 3228. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
реализую концепцию что бы был основной чекбокс при нажатии на который выбирались все остальные, при снятии выбора - соответственно все тоже снимались, нашла хороший пример http://jsfiddle.net/leaverou/ASPUA/(что бы не копировать код)
у них всё работает, у меня их пример работает, но когда переношу на свою задачу checkboxes.length = 0, то есть document.querySelectorAll('input.time') не выбирает чекбоксы, подскажите что я упустила(time и checkall написаны все одинаково в html и js)
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
         var checkboxes=document.querySelectorAll('input.time'),
        checkall = document.getElementById('checkall');
 
        // если отметить все checkbox, то будет отмечен и главный,
        //если снять checked хотя бы с одного checkbox группы, то будет снят checked и с общего чекбокса,
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].onclick = function () {
                var checkedCount = document.querySelectorAll('input.time:checked').length;
                checkall.checked = checkedCount > 0;
                checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
            }
        }
        //если будет поставлена/убрана галочка с основного чекбокса, то автоматом будут
        //убраны/установлены все флажки второстепенных checkbox.
        checkall.onclick = function () {
            for (var i = 0; i < checkboxes.length; i++) {
                console.log("i " + i);
 
                checkboxes[i].checked = this.checked;
            }
        }
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
                                        <div class="clearfix anytime-item">
                                            <label>Anytime <input type="checkbox" id="checkall"></label>
                                        </div>
                                        <div class="clearfix">
                                            <ul class="item  item-1">
                                                <li><label>Monday AM <input type="checkbox" class="time" value="Monday AM"></label></li>
                                                <li><label>Monday PM <input type="checkbox" class="time" value="Monday PM"></label></li>
                                            </ul>
                                            <ul class="item">
                                                <li><label>Tuesday AM <input type="checkbox" class="time" value="Tuesday AM"></label></li>
                                                <li><label>Tuesday PM<input type="checkbox" class="time" value="Tuesday PM"></label></li>
                                            </ul>
                                    </div>
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
03.12.2016, 01:02
Ответы с готовыми решениями:

При нажатии на один чекбокс необходимо, чтобы выбрались все остальные чекбоксы
Всем привет! такая задачка. при нажатии на один чекбокс(ChDeleteAll), необходимо, чтобы выбрались(Checked) все остальные...

Запрос, который выбирает все максимальные поля clicks для каждой рекламы из статистики
Есть 2 таблицы, нужно создать запрос который выбирает все максимальные поля clicks для каждой рекламы из статистики. ...

Найти элемент массива на который делятся все остальные
Условие задачи: В массиве из n целых чисел найти и распечатать элемент на который делятся все остальные, если такового элемента нет, то...

3
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
03.12.2016, 01:21
Ваш код прекрасно работает.
Песочница: http://codepen.io/anon/pen/jVZWQb
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
03.12.2016, 02:06
Лучший ответ Сообщение было отмечено Ogoniok как решение

Решение

Ogoniok, в примере http://jsfiddle.net/leaverou/ASPUA/ переменные checkboxes и checkall получают свои значения только после того, как браузер прочитает HTML-код всех ваших чекбоксов, да и сама функция клика по "основному" чекбоксу также определяется после загрузки страницы -- см. рисунок

вы, видимо, не обратили на это внимания и прописали код скрипта AS IS, т.е. не "обернули" код функцией, вызываемой по событию
onload

HTML-код:
HTML5
1
2
3
4
<label><input type="checkbox" id="checkall"> Check all</label>
<label><input type="checkbox" class="thing"> Thing 1</label>
<label><input type="checkbox" class="thing"> Thing 2</label>
<label><input type="checkbox" class="thing"> Thing 3</label>
CSS-стили:
CSS
1
2
3
4
5
6
7
8
9
10
11
label {
    display:block
}
 
label:first-child {
    font-weight:bold;
}
 
label:nth-child(n+2) {
    margin-left:1em;
}
Javascript:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var checkboxes = document.querySelectorAll('input.thing'),
    checkall = document.getElementById('checkall');
 
for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].onclick = function() {
        var checkedCount = document.querySelectorAll('input.thing:checked').length;
        
        checkall.checked = checkedCount > 0;
        checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
    }
}
 
checkall.onclick = function() {
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = this.checked;
    }
}
1
0 / 0 / 1
Регистрация: 17.10.2016
Сообщений: 15
03.12.2016, 10:53  [ТС]
kalabuni, спасибо, именно в этом и была проблема
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
03.12.2016, 10:53
Помогаю со студенческими работами здесь

Клиент, который выбирает данные из списка..Совет.
Здравствуйте! Как быть в такой вот ситуации. У меня есть БД в которой есть куча справочников, то есть к примеру есть справочники в...

Создание просто парсера, который выбирает друзей в ВК
Здравствуйте! Прошу помощи. Я начинающий программист и хотел бы написать свою первую программу, парсер друзей вк. Начал создавать через...

Метод, который выбирает случайным образом одно число из массива
Необходимо написать метод который: - принимает параметром массив целых чисел; - выбирает случайным образом одно число из массива; - находит...

Запрос, который выбирает только последние десять записей из таблицы
Можно как написать запрос, который выбирает только последние десять записей таблицы? Если да то, как?

Вывести все элементы матрицы, сумма индексов которых кратна 3 или 7, остальные символы заменить пробелами
Дана матрица 10 на 10, заполненная символом *. Вывести все элементы, сумма индексов которых кратна 3 или 7, остальные символы заменить...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Жизнь в неопределённости
kumehtar 23.03.2026
Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .
Модель здравоСохранения: работники работают быстрее после её введения.
anaschu 23.03.2026
geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .
1С: Контроль уникальности заводского номера
Maks 23.03.2026
Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения
anaschu 22.03.2026
e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git
1С: Программный отбор элементов справочника по группе
Maks 22.03.2026
Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .
Как я обхитрил таблицу Word
Alexander-7 21.03.2026
Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .
Krabik - рыболовный бот для WoW 3.3.5a
AmbA 21.03.2026
без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
1С: Программный отбор элементов справочника по значению перечисления
Maks 21.03.2026
Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru