Javascript.RU

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

Проверка на 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">&nbsp;<label for="answer_23_12"><span></span>Вариант ответа 1</label></div>
			<div><input id="answer_23_13" value="13" name="qw_23[]" type="checkbox">&nbsp;<label for="answer_23_13"><span></span>Вариант ответа 2</label></div>
			<div><input id="answer_23_14" value="14" name="qw_23[]" type="checkbox">&nbsp;<label for="answer_23_14"><span></span>Вариант ответа 3</label></div>
			<div><input id="answer_23_15" value="15" name="qw_23[]" type="checkbox">&nbsp;<label for="answer_23_15"><span></span>Вариант ответа 4</label></div>
			<div><input id="answer_23_16" value="16" name="qw_23[]" type="checkbox">&nbsp;<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">&nbsp;<label for="answer_24_17"><span></span>Вариант ответа 1</label></div>
			<div><input id="answer_24_18" value="18" name="qw_24" type="radio">&nbsp;<label for="answer_24_18"><span></span>Вариант ответа 2</label></div>
			<div><input id="answer_24_19" value="19" name="qw_24" type="radio">&nbsp;<label for="answer_24_19"><span></span>Вариант ответа 3</label></div>
			<div><input id="answer_24_20" value="20" name="qw_24" type="radio">&nbsp;<label for="answer_24_20"><span></span>Вариант ответа 4</label></div>
			<div><input id="answer_24_21" value="21" name="qw_24" type="radio">&nbsp;<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">&nbsp;<label for="answer_25_22"><span></span>Вариант ответа 1</label></div>
			<div><input id="answer_25_23" value="23" name="qw_25" type="radio">&nbsp;<label for="answer_25_23"><span></span>Вариант ответа 2</label></div>
			<div><input id="answer_25_24" value="24" name="qw_25" type="radio">&nbsp;<label for="answer_25_24"><span></span>Вариант ответа 3</label></div>
			<div><input id="answer_25_25" value="25" name="qw_25" type="radio">&nbsp;<label for="answer_25_25"><span></span>Вариант ответа 4</label></div>
			<div><input id="answer_25_26" value="26" name="qw_25" type="radio">&nbsp;<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, 28.12.2017 в 19:35.
Ответить с цитированием
  #2 (permalink)  
Старый 28.12.2017, 20:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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">&nbsp;<label for="answer_23_12"><span></span>Вариант ответа 1</label></div>
      <div><input id="answer_23_13" value="13" name="qw_23[]" type="checkbox">&nbsp;<label for="answer_23_13"><span></span>Вариант ответа 2</label></div>
      <div><input id="answer_23_14" value="14" name="qw_23[]" type="checkbox">&nbsp;<label for="answer_23_14"><span></span>Вариант ответа 3</label></div>
      <div><input id="answer_23_15" value="15" name="qw_23[]" type="checkbox">&nbsp;<label for="answer_23_15"><span></span>Вариант ответа 4</label></div>
      <div><input id="answer_23_16" value="16" name="qw_23[]" type="checkbox">&nbsp;<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">&nbsp;<label for="answer_24_17"><span></span>Вариант ответа 1</label></div>
      <div><input id="answer_24_18" value="18" name="qw_24" type="radio">&nbsp;<label for="answer_24_18"><span></span>Вариант ответа 2</label></div>
      <div><input id="answer_24_19" value="19" name="qw_24" type="radio">&nbsp;<label for="answer_24_19"><span></span>Вариант ответа 3</label></div>
      <div><input id="answer_24_20" value="20" name="qw_24" type="radio">&nbsp;<label for="answer_24_20"><span></span>Вариант ответа 4</label></div>
      <div><input id="answer_24_21" value="21" name="qw_24" type="radio">&nbsp;<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">&nbsp;<label for="answer_25_22"><span></span>Вариант ответа 1</label></div>
      <div><input id="answer_25_23" value="23" name="qw_25" type="radio">&nbsp;<label for="answer_25_23"><span></span>Вариант ответа 2</label></div>
      <div><input id="answer_25_24" value="24" name="qw_25" type="radio">&nbsp;<label for="answer_25_24"><span></span>Вариант ответа 3</label></div>
      <div><input id="answer_25_25" value="25" name="qw_25" type="radio">&nbsp;<label for="answer_25_25"><span></span>Вариант ответа 4</label></div>
      <div><input id="answer_25_26" value="26" name="qw_25" type="radio">&nbsp;<label for="answer_25_26"><span></span>Вариант ответа 5</label></div>
    </div>
  </div>
</div>
<input name="" type="submit" value="send">
</form>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 28.12.2017, 20:16
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

рони, спасибо огромное))
Но у меня 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
Ответить с цитированием
  #4 (permalink)  
Старый 28.12.2017, 20:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Batyabest,

$(function() {
$('#testingForm').submit(function(event){

        var question = $("div.question_item");
        if(question.length != question.has(":checked").length) {
        event.preventDefault()
        alert("Вы ответили не на все вопросы!");
        }
        else {
          alert("это модальное окно");

        }

    });

});
Ответить с цитированием
  #5 (permalink)  
Старый 28.12.2017, 20:48
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

рони, скорее всего конфликтует ajax отправка формы с этой проверкой. Может мне дать вам доступ вы посмотрите? Целый день бьюсь с этим моментом((((
Ответить с цитированием
  #6 (permalink)  
Старый 28.12.2017, 20:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Batyabest,
не нужно, всё что мог смотрите выше
Ответить с цитированием
  #7 (permalink)  
Старый 28.12.2017, 21:12
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

рони, спасибо огромное! Ваш код очень пригодился. Просто у меня форма отправлялась через Ajax с помощью специального компонента. А в нем есть встроенная возможность запрещать или разрешать отправку формы. Так вот запретить я запретил, а else не написал для отправки)) Спасибо большое еще раз за помощь!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить значение ячейки таблицы внутри блока div, в итерации .each() Sanu0074 jQuery 1 21.01.2014 19:32
Div внутри div valyan (X)HTML/CSS 3 03.09.2013 22:43
fade маленького div внутри большого div kenwo0d jQuery 17 19.05.2012 16:27
Фиксация блока DIV при сворачивании другого блока DIV kacnepbI4 jQuery 2 04.04.2011 14:15
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21