28.02.2018, 17:35
|
|
Профессор
|
|
Регистрация: 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?
|
|
28.02.2018, 18:19
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Получить всю коллекцию, методрм some() проверить на checked, всю эту проверу засунуть в условную инстркуцию if со знаком!
Последний раз редактировалось j0hnik, 28.02.2018 в 18:25.
|
|
28.02.2018, 18:21
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Можно сразу получить всю коллекцию выбранных чекбоксов
document.querySelectorAll('input[type=checkbox]:checked')
|
|
28.02.2018, 18:35
|
|
Профессор
|
|
Регистрация: 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('Вы не выбрали программы');
}
|
|
28.02.2018, 18:50
|
|
Профессор
|
|
Регистрация: 14.09.2013
Сообщений: 252
|
|
|
j0hnik,
А у меня несколько блоков с направлениями, как можно для каждой в отдельности сделать эту проверку. И если в какой-то из них нет checked вывести alert?
|
|
28.02.2018, 18:55
|
|
Профессор
|
|
Регистрация: 14.09.2013
Сообщений: 252
|
|
|
Dilettante_Pro,
Это если все чекбоксы собирать, а если мне нужно только такое действие сделать: Есть 10 программ. Пользователь выбрал в 3, в двух выбрал внутри направления, а в одной - забыл. И тут ему раз... alert))
|
|
28.02.2018, 19:40
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
28.02.2018, 19:41
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Batyabest,
Конечно можно! у них же есть какой то отдельный класс?
|
|
28.02.2018, 20:06
|
|
Профессор
|
|
Регистрация: 14.09.2013
Сообщений: 252
|
|
|
рони,
в который раз убеждаюсь, что вы гений. Все работает так, как нужно. Спасибо огромное!
|
|
|
|
