Проверка на checked внутри блока div
Добрый день. У меня есть некий тест, в котором варианты ответов каждого вопросов размещены внутри блока div. Некоторые вопросы подразумевают несколько правильных вариантов ответов, некоторые - один. В результате у меня часть вопросов реализована radio, часть - checkbox.
Подскажите, как правильно сделать проверку, чтобы в каждом из блоков был отмечен хотя бы один checkbox/radio? Вот кусок верстки: <div class="question_list"> <div id="qwestion_23" class="question_item"> <b>Какая длина установлена для перчаток диэлектрических?</b> <div id="5"> <div><input id="answer_23_12" value="12" name="qw_23[]" type="checkbox"> <label for="answer_23_12"><span></span>Вариант ответа 1</label></div> <div><input id="answer_23_13" value="13" name="qw_23[]" type="checkbox"> <label for="answer_23_13"><span></span>Вариант ответа 2</label></div> <div><input id="answer_23_14" value="14" name="qw_23[]" type="checkbox"> <label for="answer_23_14"><span></span>Вариант ответа 3</label></div> <div><input id="answer_23_15" value="15" name="qw_23[]" type="checkbox"> <label for="answer_23_15"><span></span>Вариант ответа 4</label></div> <div><input id="answer_23_16" value="16" name="qw_23[]" type="checkbox"> <label for="answer_23_16"><span></span>Вариант ответа 5</label></div> </div> </div> <div id="qwestion_24" class="question_item"> <b>Какие общие требования предъявляются к распределительным устройствам, щитам и сборкам, установленным</b> <div id="5"> <div><input id="answer_24_17" value="17" name="qw_24" type="radio"> <label for="answer_24_17"><span></span>Вариант ответа 1</label></div> <div><input id="answer_24_18" value="18" name="qw_24" type="radio"> <label for="answer_24_18"><span></span>Вариант ответа 2</label></div> <div><input id="answer_24_19" value="19" name="qw_24" type="radio"> <label for="answer_24_19"><span></span>Вариант ответа 3</label></div> <div><input id="answer_24_20" value="20" name="qw_24" type="radio"> <label for="answer_24_20"><span></span>Вариант ответа 4</label></div> <div><input id="answer_24_21" value="21" name="qw_24" type="radio"> <label for="answer_24_21"><span></span>Вариант ответа 5</label></div> </div> </div> <div id="qwestion_25" class="question_item"> <b>Какие обязанности по организации эксплуатации электроустановок возложены на ответственного за электр</b> <div id="5"> <div><input id="answer_25_22" value="22" name="qw_25" type="radio"> <label for="answer_25_22"><span></span>Вариант ответа 1</label></div> <div><input id="answer_25_23" value="23" name="qw_25" type="radio"> <label for="answer_25_23"><span></span>Вариант ответа 2</label></div> <div><input id="answer_25_24" value="24" name="qw_25" type="radio"> <label for="answer_25_24"><span></span>Вариант ответа 3</label></div> <div><input id="answer_25_25" value="25" name="qw_25" type="radio"> <label for="answer_25_25"><span></span>Вариант ответа 4</label></div> <div><input id="answer_25_26" value="26" name="qw_25" type="radio"> <label for="answer_25_26"><span></span>Вариант ответа 5</label></div> </div> </div> </div> А вот мои попытки сделать проверку - работает некорректно.
$('#testingForm').submit(function(){
var errors = 0;
$("div.question_item").each(function() {
if ($(this).children("div").children("div").children("input:radio:checked").length == 0) {
errors++;
}
});
if (errors!=0) {
alert("Вы ответили не на все вопросы!");
return false;
}
});
|
Batyabest,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('#testingForm').submit(function(event){
var question = $("div.question_item");
question.length == question.has(":checked").length || (event.preventDefault(),alert("Вы ответили не на все вопросы!"))
});
});
</script>
</head>
<body>
<form action="http://" id="testingForm">
<div class="question_list">
<div id="qwestion_23" class="question_item">
<b>Какая длина установлена для перчаток диэлектрических?</b>
<div id="5">
<div><input id="answer_23_12" value="12" name="qw_23[]" type="checkbox"> <label for="answer_23_12"><span></span>Вариант ответа 1</label></div>
<div><input id="answer_23_13" value="13" name="qw_23[]" type="checkbox"> <label for="answer_23_13"><span></span>Вариант ответа 2</label></div>
<div><input id="answer_23_14" value="14" name="qw_23[]" type="checkbox"> <label for="answer_23_14"><span></span>Вариант ответа 3</label></div>
<div><input id="answer_23_15" value="15" name="qw_23[]" type="checkbox"> <label for="answer_23_15"><span></span>Вариант ответа 4</label></div>
<div><input id="answer_23_16" value="16" name="qw_23[]" type="checkbox"> <label for="answer_23_16"><span></span>Вариант ответа 5</label></div>
</div>
</div>
<div id="qwestion_24" class="question_item">
<b>Какие общие требования предъявляются к распределительным устройствам, щитам и сборкам, установленным</b>
<div id="5">
<div><input id="answer_24_17" value="17" name="qw_24" type="radio"> <label for="answer_24_17"><span></span>Вариант ответа 1</label></div>
<div><input id="answer_24_18" value="18" name="qw_24" type="radio"> <label for="answer_24_18"><span></span>Вариант ответа 2</label></div>
<div><input id="answer_24_19" value="19" name="qw_24" type="radio"> <label for="answer_24_19"><span></span>Вариант ответа 3</label></div>
<div><input id="answer_24_20" value="20" name="qw_24" type="radio"> <label for="answer_24_20"><span></span>Вариант ответа 4</label></div>
<div><input id="answer_24_21" value="21" name="qw_24" type="radio"> <label for="answer_24_21"><span></span>Вариант ответа 5</label></div>
</div>
</div>
<div id="qwestion_25" class="question_item">
<b>Какие обязанности по организации эксплуатации электроустановок возложены на ответственного за электр</b>
<div id="5">
<div><input id="answer_25_22" value="22" name="qw_25" type="radio"> <label for="answer_25_22"><span></span>Вариант ответа 1</label></div>
<div><input id="answer_25_23" value="23" name="qw_25" type="radio"> <label for="answer_25_23"><span></span>Вариант ответа 2</label></div>
<div><input id="answer_25_24" value="24" name="qw_25" type="radio"> <label for="answer_25_24"><span></span>Вариант ответа 3</label></div>
<div><input id="answer_25_25" value="25" name="qw_25" type="radio"> <label for="answer_25_25"><span></span>Вариант ответа 4</label></div>
<div><input id="answer_25_26" value="26" name="qw_25" type="radio"> <label for="answer_25_26"><span></span>Вариант ответа 5</label></div>
</div>
</div>
</div>
<input name="" type="submit" value="send">
</form>
</body>
</html>
|
рони, спасибо огромное))
Но у меня 2 момента возникли: 1. Скрипт после закрытия alert продолжает рабоатьт - у меня если на все вопрсоы отвечено, вылезает модалочка с резулататами, вот у меня получается сначала alert, а потом модалка сразу. Добавил return false так:
$('#testingForm').submit(function(event){
var question = $("div.question_item");
question.length == question.has(":checked").length || (event.preventDefault(),alert("Вы ответили не на все вопросы!"))
return false;
});
Но в таком варианте если везде есть отмеченные вещи, не отправляется форма... ну ведь там returm false |
Batyabest,
:-?
$(function() {
$('#testingForm').submit(function(event){
var question = $("div.question_item");
if(question.length != question.has(":checked").length) {
event.preventDefault()
alert("Вы ответили не на все вопросы!");
}
else {
alert("это модальное окно");
}
});
});
|
рони, скорее всего конфликтует ajax отправка формы с этой проверкой. Может мне дать вам доступ вы посмотрите? Целый день бьюсь с этим моментом((((
|
Batyabest,
не нужно, всё что мог смотрите выше |
рони, спасибо огромное! Ваш код очень пригодился. Просто у меня форма отправлялась через Ajax с помощью специального компонента. А в нем есть встроенная возможность запрещать или разрешать отправку формы. Так вот запретить я запретил, а else не написал для отправки)) Спасибо большое еще раз за помощь!
|
| Часовой пояс GMT +3, время: 11:17. |