Проверить отмечен ли хотя бы один чекбокс у выбранного блока
Добрый день.
Подскажите, пожалуйста, как решить проблему: Есть такая форма с вопросами
<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? |
Получить всю коллекцию, методрм some() проверить на checked, всю эту проверу засунуть в условную инстркуцию if со знаком!
|
Можно сразу получить всю коллекцию выбранных чекбоксов
document.querySelectorAll('input[type=checkbox]:checked') |
Цитата:
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('Вы не выбрали программы');
}
|
j0hnik,
А у меня несколько блоков с направлениями, как можно для каждой в отдельности сделать эту проверку. И если в какой-то из них нет checked вывести alert? |
Dilettante_Pro,
Это если все чекбоксы собирать, а если мне нужно только такое действие сделать: Есть 10 программ. Пользователь выбрал в 3, в двух выбрал внутри направления, а в одной - забыл. И тут ему раз... alert)) |
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>
|
Batyabest,
Конечно можно! у них же есть какой то отдельный класс? |
рони,
в который раз убеждаюсь, что вы гений. Все работает так, как нужно. Спасибо огромное! |
| Часовой пояс GMT +3, время: 17:44. |