Проверка групп Checkbox

@Wal1y · Регистрация: 06.10.2015

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

Добрый день, уважаемые, необходима ваша помощь.
Суть такова, есть две группы чекбоксов, первая:

HTML5
1
2
3
4
5
6
7
8
9
<form action="" method="post" name="den">
<INPUT TYPE=CHECKBOX NAME="pn" VALUE=yes>Понедельник<br>
<INPUT TYPE=CHECKBOX NAME="vt" VALUE=yes>Вторник<br>
<INPUT TYPE=CHECKBOX NAME="sr" VALUE=yes>Среда<br>
<INPUT TYPE=CHECKBOX NAME="cht" VALUE=yes>Четверг<br>
<INPUT TYPE=CHECKBOX NAME="pt" VALUE=yes>Пятница<br>
<INPUT TYPE=CHECKBOX NAME="sb" VALUE=yes>Суббота<br>
<INPUT TYPE=CHECKBOX NAME="vs" VALUE=yes>Воскресенье<br>
</form>

Вторая:

HTML5
1
2
3
4
<form action="" method="post" name="mode">
<INPUT TYPE=CHECKBOX NAME="morning" VALUE=yes>Утро
<INPUT TYPE=CHECKBOX NAME="evening" VALUE=yes>Вечер
</form>

Помимо этого есть на странице еще два текстовых поля. Отправка формы осуществляется с помощью

HTML5
1
<button type="submit" name="send">Сохранить настройки</button>

Необходимо запретить пользователю отправку формы и вывести сообщение об ошибке, если в этих двух группах не будет отмечено хотя бы по одному чекбоксу. С js у меня совсем все плохо.

@Forastero · 19.06.2016, 11:29

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let groupOne = document.forms.den.querySelectorAll('input'),
    groupTwo = document.forms.mode.querySelectorAll('input');
 
// Непонятно где кнопка находится, так что поправьте
document.getElementById('submitButton').addEventListener('click', (e) => {
  if(!isChecked(groupOne) || !isChecked(groupTwo)) {
    e.preventDefault();
    alert('Параметры указаны неверно')
  }
});
 
let isChecked = (elems) => {
    let checked = false;
  Array.prototype.map.call(elems, (checkbox) => {
    if(checkbox.checked) {
      checked = true;
    }
  });
  return checked;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <form action="" method="post" name="den">
  <INPUT TYPE=CHECKBOX NAME="pn" VALUE=yes>Понедельник<br>
  <INPUT TYPE=CHECKBOX NAME="vt" VALUE=yes>Вторник<br>
  <INPUT TYPE=CHECKBOX NAME="sr" VALUE=yes>Среда<br>
  <INPUT TYPE=CHECKBOX NAME="cht" VALUE=yes>Четверг<br>
  <INPUT TYPE=CHECKBOX NAME="pt" VALUE=yes>Пятница<br>
  <INPUT TYPE=CHECKBOX NAME="sb" VALUE=yes>Суббота<br>
  <INPUT TYPE=CHECKBOX NAME="vs" VALUE=yes>Воскресенье<br>
</form>
  <form action="" method="post" name="mode">
  <INPUT TYPE=CHECKBOX NAME="morning" VALUE=yes>Утро
  <INPUT TYPE=CHECKBOX NAME="evening" VALUE=yes>Вечер
</form>
<button type="submit" name="send" id="submitButton">Сохранить настройки</button>

Пример

@BANO · 19.06.2016, 11:33

Не по теме:

Forastero, лучше пока не использовать es6
да он красив и функционален, но не всеми браузерами поддерживается, а может именно эта поддержка и нужна тс
поэтому пока есть ie8 на рынке лучше его не использовать не упоминая babel

@Forastero · 19.06.2016, 11:41

Не по теме:

BANO, пропустить через gulp с плагином babel. Всего делов-то.)
Никогда не наступит тот момент, чтобы ES полностью поддерживался всеми браузерами. Мы подсели на иглу в виде babel.

@kalabuni · 19.06.2016, 11:55

Замечу, что у вас плохо не только с js, но и с html

у вас на странице не "две группы чекбоксов", а две разные формы

какую из форм вы собираетесь отправлять, проверяя наличие отмеченных чекбоксов в обеих формах?
верхнюю или нижнюю?
--------------
группа чекбоксов -- это несколько чекбоксов с одним именем (с одинаковым значением атрибута NAME)
-------------------------
вам всё надо переделать, приблизительно вот так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
<form>
<p><input type="checkbox" name="day" value="mon">Понедельник
<p><input type="checkbox" name="day" value="tue">Вторник
<p><input type="checkbox" name="day" value="wed">Среда
<p><input type="checkbox" name="day" value="thu">Четверг
<p><input type="checkbox" name="day" value="fri">Пятница
<p><input type="checkbox" name="day" value="sat">Суббота
<p><input type="checkbox" name="day" value="sun">Воскресенье
<hr>
<p><input type="checkbox" name="part" value="mor">Утро
<p><input type="checkbox" name="part" value="eve">Вечер
<hr>
<p><input type="submit" value="Сохранить" onclick="return testForm (this.form)">
</form>

JavaScript
1
2
3
4
5
6
7
8
9
function testForm (f)
{
var errDay = errPart = true;
for (var days = f.day, j = 0, J = days.length; j < J; j++) if (days [j].checked) {errDay = false; break}
for (var parts = f.part, j = 0, J = parts.length; j < J; j++) if (parts [j].checked) {errPart = false; break}
if (errDay) {alert ('Не указан день недели'); return false}
if (errPart) {alert ('Не указано время суток'); return false}
return true;
}

@Wal1y · 19.06.2016, 12:03 **[ТС]**

Отправлять необходимо обе формы. Прошу простить мне мою некоторую некомпетентность.

@BANO · 19.06.2016, 12:03

Не по теме:

Forastero, тс явно не знает про существование gulp и babel

@Wal1y · 19.06.2016, 12:08 **[ТС]**

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

Не по теме:

Forastero, тс явно не знает про существование gulp и babel

Вы правы, к сожалению.

@kalabuni · 19.06.2016, 12:20

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

Отправлять необходимо обе формы.

для отправки любой формы требуется две вещи: 1) время и 2) окно браузера
окно браузера нужно для помещения в него страницы с сервера, адрес которой указан в атрибуте ACTION тега <form>
а время нужно для того, чтобы страница с сервера успела в окно загрузиться

если вы отправите верхнюю форму, то текущая страница из окна исчезнет и заменится страницей из ACTION верхней формы
и исчезнет текущая страница вместе с обеими формами
как потом отправлять нижнюю форму, если её уже не будет?

@Wal1y · 19.06.2016, 13:15 **[ТС]**

Forastero, попробовал ваш способ, но, почему-то не выполняется отправка формы при успешном выполнении условий.

@kalabuni · 19.06.2016, 13:32

Wal1y, код от Forastero -- он чисто теоретический (и даже не потому, что написан на ES6, которого браузеры не понимают, а потому что код этот не имеет вообще никакого отношения к вашему HTML-коду

а ваш HTML-код -- это полный бред, о чём я уже написал выше
и бред он хотя бы потому, что кнопка <button type="submit" name="send" id="submitButton">Сохранить настройки</button> может работать, если только находится внутри формы (между тегами <form> и </form>), а у вас эта кнопка просто "висит в воздухе"

@Wal1y · 19.06.2016, 13:42 **[ТС]**

kalabuni, теперь возникла проблема как отправить те значения, которые были выбраны?

@kalabuni · 19.06.2016, 13:47

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

теперь возникла проблема как отправить те значения, которые были выбраны?

перестаньте врать!!!
проблема у вас не "теперь возникла"
ваш код никогда ничего не мог отправлять в принципе

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	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 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

@BANO
	19.06.2016, 11:33
	Не по теме: Forastero, лучше пока не использовать es6 да он красив и функционален, но не всеми браузерами поддерживается, а может именно эта поддержка и нужна тс поэтому пока есть ie8 на рынке лучше его не использовать не упоминая babel 0

@Forastero
	19.06.2016, 11:41
	Не по теме: BANO, пропустить через gulp с плагином babel. Всего делов-то.) Никогда не наступит тот момент, чтобы ES полностью поддерживался всеми браузерами. Мы подсели на иглу в виде babel. 0

@Wal1y 0 / 0 / 0 Регистрация: 06.10.2015 Сообщений: 8
	19.06.2016, 12:03 [ТС]
	Отправлять необходимо обе формы. Прошу простить мне мою некоторую некомпетентность. 0

@BANO
	19.06.2016, 12:03
	Не по теме: Forastero, тс явно не знает про существование gulp и babel 0

@Wal1y 0 / 0 / 0 Регистрация: 06.10.2015 Сообщений: 8
	19.06.2016, 13:15 [ТС]
	Forastero, попробовал ваш способ, но, почему-то не выполняется отправка формы при успешном выполнении условий. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	19.06.2016, 13:32
	Wal1y, код от Forastero -- он чисто теоретический (и даже не потому, что написан на ES6, которого браузеры не понимают, а потому что код этот не имеет вообще никакого отношения к вашему HTML-коду а ваш HTML-код -- это полный бред, о чём я уже написал выше и бред он хотя бы потому, что кнопка <button type="submit" name="send" id="submitButton">Сохранить настройки</button> может работать, если только находится внутри формы (между тегами <form> и </form>), а у вас эта кнопка просто "висит в воздухе" 0

@Wal1y 0 / 0 / 0 Регистрация: 06.10.2015 Сообщений: 8
	19.06.2016, 13:42 [ТС]
	kalabuni, теперь возникла проблема как отправить те значения, которые были выбраны? 0