Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.02.2018, 17:35
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Проверить отмечен ли хотя бы один чекбокс у выбранного блока
Добрый день.
Подскажите, пожалуйста, как решить проблему:
Есть такая форма с вопросами
<div class="progblock">
<label class="bold_name"><input name="public" class="public osnova" value="ОХРАНА ТРУДА" type="checkbox"> ОХРАНА ТРУДА</label>

<div class="napravlenie hides" style="display:none;">
   
   <label class="col-xs-12">Выберите программу курса</label>
   <div class="col-xs-12">
            <label><input name="ot_programm1" data-progs="108" value="Программа 'Охрана труда в организациях'" class="public2" type="checkbox"> Программа 'Охрана труда в организациях'</label>
		<div class="col-xs-8 napravlenie fr hides" style="display:none;">
		<div class="checkbox col-xs-6 forma_obuchen">
            <select name="ot_forma1" class="form-control">
             <option value="" selected="selected">Форма обучения</option>
			   <option value="Очно-заочная">Очно-заочная</option>
			   <option value="Дистанционная">Дистанционная</option>
			</select>
        </div>
		<div class="checkbox col-xs-6 kolvo_uchenik">
		<input name="ot_kolvo1" value="" class="form-control" placeholder="Число слушателей" min="1" type="number">
        </div>
		</div>
    </div>
    <div class="col-xs-12">
            <label><input name="ot_programm2" data-progs="111" value="Программа повышения квалификации 'Охрана труда для руководителей и специалистов служб охраны труда, работников, на которых приказом работодателя возложены функции специалиста по охране труда'" class="public2" type="checkbox"> Программа повышения квалификации 'Охрана труда для руководителей и специалистов служб охраны труда, работников, на которых приказом работодателя возложены функции специалиста по охране труда'</label>
		<div class="col-xs-8 napravlenie fr hides" style="display:none;">
		<div class="checkbox col-xs-6 forma_obuchen">
            <select name="ot_forma2" class="form-control">
             <option value="" selected="selected">Форма обучения</option>
			   <option value="Очно-заочная">Очно-заочная</option>
			   <option value="Дистанционная">Дистанционная</option>
			</select>
        </div>
		<div class="checkbox col-xs-6 kolvo_uchenik">
		<input name="ot_kolvo2" value="" class="form-control" placeholder="Число слушателей" min="1" type="number">
        </div>
		</div>
    </div>
    <div class="col-xs-12">
           <label><input name="ot_programm3" data-progs="480" value="Программа профессиональной переподготовки 'Охрана труда и безопасность производственной деятельности'" class="public2" type="checkbox"> Программа профессиональной переподготовки 'Охрана труда и безопасность производственной деятельности'</label>
		<div class="col-xs-8 napravlenie fr hides" style="display:none;">
		<div class="checkbox col-xs-6 forma_obuchen">
            <select name="ot_forma3" class="form-control">
			   <option value="" selected="selected">Форма обучения</option>
			   <option value="Очно-заочная">Очно-заочная</option>
			   <option value="Дистанционная">Дистанционная</option>
			</select>
        </div>
		<div class="checkbox col-xs-6 kolvo_uchenik">
            <input name="ot_kolvo3" value="" class="form-control" placeholder="Число слушателей" min="1" type="number">
        </div>
		</div>
    </div>
</div>
<div class="clearfix"></div>
</div>


Это пример блока одного направления, Охрана труда. Внутри него программы.
При выборе чекбокса с Охрана труда разворачиваются соответствующие ему направления. Как сделать такую проверку, что если у выбранной программы пользователь не выбрал ни одно направление, то ему выдать alert?
Ответить с цитированием
  #2 (permalink)  
Старый 28.02.2018, 18:19
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Получить всю коллекцию, методрм some() проверить на checked, всю эту проверу засунуть в условную инстркуцию if со знаком!

Последний раз редактировалось j0hnik, 28.02.2018 в 18:25.
Ответить с цитированием
  #3 (permalink)  
Старый 28.02.2018, 18:21
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Можно сразу получить всю коллекцию выбранных чекбоксов

document.querySelectorAll('input[type=checkbox]:checked')
Ответить с цитированием
  #4 (permalink)  
Старый 28.02.2018, 18:35
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Сообщение от Dilettante_Pro Посмотреть сообщение
Можно сразу получить всю коллекцию выбранных чекбоксов

document.querySelectorAll('input[type=checkbox]:checked')
Вот я получаю 2 массива, одни по программа, второй по направлениям. Но мой беда в том, что они не связаны как Программа/Направления. Я попытался потом просто сравнить их длины, но это не верно. Например, можно выбрать 2 программы, в одной вообще не выбрать направление, а во второй выбрать 2 и получится по моему коду что вроде везде все верно.

var arrProg=$('input.osnova:checkbox:checked').map(function() {return this.value;}).get();
	var arrNap=$('input.public2:checkbox:checked').map(function() {return this.value;}).get();

if (arrProg.length == 0 || arrNap.length == 0) {
	alert('Вы не выбрали программы');
					}
Ответить с цитированием
  #5 (permalink)  
Старый 28.02.2018, 18:50
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

j0hnik,
А у меня несколько блоков с направлениями, как можно для каждой в отдельности сделать эту проверку. И если в какой-то из них нет checked вывести alert?
Ответить с цитированием
  #6 (permalink)  
Старый 28.02.2018, 18:55
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Dilettante_Pro,
Это если все чекбоксы собирать, а если мне нужно только такое действие сделать: Есть 10 программ. Пользователь выбрал в 3, в двух выбрал внутри направления, а в одной - забыл. И тут ему раз... alert))
Ответить с цитированием
  #7 (permalink)  
Старый 28.02.2018, 19:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Batyabest,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.btn').addEventListener('click', function() {
        var bad = [].reduce.call(document.querySelectorAll('.progblock'), function(temp, block) {
            var box = block.querySelector('input[type=checkbox]');
            var checkboxs = block.querySelectorAll('input[type=checkbox]:checked');
            var title = box.parentNode.textContent.trim();
            if (box.checked && checkboxs.length < 2) temp.push(title)
            return temp
        }, []);
        if (bad.length) {
            alert('в блоке/ах ' + bad + ' не отмечено направление');
        }
    });
});
  </script>
</head>

<body>
<div class="progblock">
<label class="bold_name"><input name="public" class="public osnova" value="ОХРАНА ТРУДА" type="checkbox" checked="checked" > ОХРАНА ТРУДА</label>

<div class="napravlenie hides" style="display:none;">

   <label class="col-xs-12">Выберите программу курса</label>
   <div class="col-xs-12">
            <label><input name="ot_programm1" data-progs="108" value="Программа 'Охрана труда в организациях'" class="public2" type="checkbox"> Программа 'Охрана труда в организациях'</label>
    <div class="col-xs-8 napravlenie fr hides" style="display:none;">
    <div class="checkbox col-xs-6 forma_obuchen">
            <select name="ot_forma1" class="form-control">
             <option value="" selected="selected">Форма обучения</option>
         <option value="Очно-заочная">Очно-заочная</option>
         <option value="Дистанционная">Дистанционная</option>
      </select>
        </div>
    <div class="checkbox col-xs-6 kolvo_uchenik">
    <input name="ot_kolvo1" value="" class="form-control" placeholder="Число слушателей" min="1" type="number">
        </div>
    </div>
    </div>
    <div class="col-xs-12">
            <label><input name="ot_programm2" data-progs="111" value="Программа повышения квалификации 'Охрана труда для руководителей и специалистов служб охраны труда, работников, на которых приказом работодателя возложены функции специалиста по охране труда'" class="public2" type="checkbox"> Программа повышения квалификации 'Охрана труда для руководителей и специалистов служб охраны труда, работников, на которых приказом работодателя возложены функции специалиста по охране труда'</label>
    <div class="col-xs-8 napravlenie fr hides" style="display:none;">
    <div class="checkbox col-xs-6 forma_obuchen">
            <select name="ot_forma2" class="form-control">
             <option value="" selected="selected">Форма обучения</option>
         <option value="Очно-заочная">Очно-заочная</option>
         <option value="Дистанционная">Дистанционная</option>
      </select>
        </div>
    <div class="checkbox col-xs-6 kolvo_uchenik">
    <input name="ot_kolvo2" value="" class="form-control" placeholder="Число слушателей" min="1" type="number">
        </div>
    </div>
    </div>
    <div class="col-xs-12">
           <label><input name="ot_programm3" data-progs="480" value="Программа профессиональной переподготовки 'Охрана труда и безопасность производственной деятельности'" class="public2" type="checkbox"> Программа профессиональной переподготовки 'Охрана труда и безопасность производственной деятельности'</label>
    <div class="col-xs-8 napravlenie fr hides" style="display:none;">
    <div class="checkbox col-xs-6 forma_obuchen">
            <select name="ot_forma3" class="form-control">
         <option value="" selected="selected">Форма обучения</option>
         <option value="Очно-заочная">Очно-заочная</option>
         <option value="Дистанционная">Дистанционная</option>
      </select>
        </div>
    <div class="checkbox col-xs-6 kolvo_uchenik">
            <input name="ot_kolvo3" value="" class="form-control" placeholder="Число слушателей" min="1" type="number">
        </div>
    </div>
    </div>
</div>
<div class="clearfix"></div>
</div>
<input name="" type="button" value="test" class="btn">
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 28.02.2018, 19:41
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Batyabest,
Конечно можно! у них же есть какой то отдельный класс?
Ответить с цитированием
  #9 (permalink)  
Старый 28.02.2018, 20:06
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

рони,
в который раз убеждаюсь, что вы гений. Все работает так, как нужно. Спасибо огромное!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Как выбрать один чекбокс из группы чекбоксов Hol1killer Общие вопросы Javascript 2 25.10.2013 17:26
Узнать, отмечен чекбокс или нет ololosh jQuery 4 08.01.2013 18:04
Выделить группу чекбоксов. В группе может быть только один чекбокс. JooZ Элементы интерфейса 2 23.12.2009 19:28