Проблемы с получением значения переключателя для формы обратной связи

Question

Я пытаюсь создать простую форму обратной связи. Пользователь ответит на ряд вопросов «да» или «нет». Если они выберут «нет», тогда им будет предоставлена ​​форма комментариев для включения текста.

В настоящее время у меня возникают проблемы с получением значений переключателей. Я пытаюсь напечатать их в консоли, но ничего не происходит, когда я выбираю соответствующий выбор. Если пользователь выбирает «нет», он должен помнить комментарий, который будет отправлен.

Мои JSFiddle здесь: http://jsfiddle.net/787x18vx/

HTML

<p>You are providing feedback</p> 
<form> 
    <div id="question-1"> 
    <label for="question-1">Is this correct?</label> 
    <input type="radio" value="yes" name="choice-1" />Yes 
    <input type="radio" value="no" name="choice-1" />No 
    </div> 
    <div id="question-2"> 
    <label for="question-2">Another question</label> 
    <input type="radio" value="yes" name="choice-2" />Yes 
    <input type="radio" value="no" name="choice-2" />No 
    </div> 
    <div id="question-3"> 
    <label for="question-3">One more question</label> 
    <input type="radio" value="yes" name="choice-3" />Yes 
    <input type="radio" value="no" name="choice-3" />No 
    </div> 
    <br /> 
    <button>Send Feedback</button> 
</form> 

JQuery

var firstInput = 'input[name=choice]'; 
var firstInputValue = $('input[name=choice-1]:checked').val(); 
$(firstInput).on('click', function() { 
    console.log(firstInputValue); 
    console.log($('input[name="choice-1"]:checked').val()); 
    console.log($('input[name="choice-2"]:checked').val()); 
    // if value === 'no' show comment form 
}); 

Answer 1

Вы используете input[name=choice] селектор, который не существующее место.

Используйте вместо этого input[type=radio].

var firstInput = 'input[type=radio]'; 
var firstInputValue = $('input[name=choice-1]:checked').val(); 
$(firstInput).on('click', function() { 
    console.log(firstInputValue); 
    console.log($('input[name="choice-1"]:checked').val()); 
    console.log($('input[name="choice-2"]:checked').val()); 
    // if value === 'no' show comment form 
}); 

Fiddle

Answer 2

var firstInput = 'input[name=choice]'; Это ищет что-то конкретно с именем choice, который не появляется, чтобы быть в вашем HTML.

Существует два способа об этом. Во-первых, просто измените свой селектор:

$('input[type=radio]').on('click', function(){... 

Это вызовет функцию нажатием любой радио

Другой способ с селектором подстановочные:

var firstInput = 'input[name^=choice]'; 

^ должен сделать это поэтому выбирается любой ввод с именем, начинающимся с choice.

Этот метод должен работать, но таргетинг input[type=radio], вероятно, является лучшим решением,

Answer 3

Вы пропускаете -1 ваше имя

var firstInput = 'input[name=choice-1]'; 

Answer 4

Вашего селектора пытается получить тег с именем точно равно ' выбор'. Вы можете осуществлять поиск по приставке со следующим

var firstInput = 'input[name|="choice"]'; 

Это позволит получить все тег, название которых начинается с «выбором»