0

Как сформировать правильную логику JS-скрипта на отмечание пользователем да/нет, чтобы мы могли понять выбрал ли пользователь один из вариантов?

<form action="" name="question_form">
<div class="container">
    <div class="row page_title">
        <h1>Title</h1>
    </div>
    <div class="row question_q">
        <div class="questions">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                <p>Question-1?</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 radio_btn">
                <div>
                    <input type="radio" name="question1" id="radio1" />
                    <label for="radio1">yes</label>
                </div>
                <div>
                    <input type="radio" name="question1" id="radio2" />
                    <label for="radio2">no</label>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="questions">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                <p>Question-2?</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 radio_btn">
                <div>
                    <input type="radio" name="question2" id="radio3"/>
                    <label for="radio3">yes</label>
                </div>
                <div>
                    <input type="radio" name="question2" id="radio4" />
                    <label for="radio4">no</label>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="questions">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                <p>Question-3?</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 radio_btn">
                <div>
                    <input type="radio" name="question3" id="radio5"/>
                    <label for="radio5">yes</label>
                </div>
                <div>
                    <input type="radio" name="question3" id="radio6" />
                    <label for="radio6">no</label>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    <div class="row">
        <div class="col-lg-4 col-lg-offset-8 col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8 col-xs-12">
            <input type="submit" id="complete" value="go">
        </div>
    </div>
</div>
</form>  

Вариант JS-Скрипта, который показывает отмечен ли вариант yes, но когда отмечаешь NO приходит False, нужно чтобы было понятно что например TRUE это пользователь что то выбрал, а false не выбрал ничего:

for(var i=1; i <= 3; i++){
            console.log($("input[name='question"+i+"']").prop("checked"));
        }  

Примечание: required понимает семейство name.

1
  • Вы какого результата хотите добиться? И какая конечная цель?
    – zhurof
    Commented 9 июл. 2018 в 12:58

1 ответ 1

0

Если вам необходимо в зависимости от выбранной конкретной кнопки делать какие-то конкретные действия - то реализовать это можно так. Думаю переделать под свои нужды будет не трудно.

  $('input:radio')
.on('click',function(e){
  var $this = $(this);
  var $radio = $('#radio-form input:checked');
  if ($this.get(0).hasAttribute('active')) { // если снимаем выделения с выбранного input.
  $this.removeAttr('active');
  $this.removeAttr('checked');
  console.log('NOTHING IS SELECTED');
  return
  } else { // при выборе конкретного инпута
  $this.attr('active','');
  $radio.not($this).removeAttr('checked active');
      if ($this.next().text() == 'yes') {
      console.log('YES SELECTED');
    } else {
      console.log('NO SELECTED');
    }
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="radio-form">
  <div class="div"></div>
           <input type="radio" id="radio1" name="radio1">
           <label for="radio1">yes</label>         
  </html>
  <div class="div"></div>
           <input type="radio" id="radio2" name="radio2">
           <label for="radio2">no</label>         
  </html>
  <div class="div"></div>
           <input type="radio" id="radio3" name="radio3">
           <label for="radio3">yes</label>        
</form>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.