获取jQuery中选中的单选按钮的值

Question

我有一些问题的答案。 我想将选中的答案存储在变量中。 每个答案都是单选按钮。 例如：

<h4 class='ques1'>Question one here here</h4>
    <div class="checkbox">
        <label>
            <input type="checkbox"> answer 1
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> answer 2
        </label>
    </div>

 <h4 class='ques2'>Question two here here</h4>
    <div class="checkbox">
        <label>
            <input type="checkbox"> answer 1
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> answer 2
        </label>
    </div>

然后，我设置了变量来存储检查的答案……。

var ques1Answer, ques2Answer;

我不确定是否需要查询标签标签或输入标签来获取值。 但这是我尝试过的：

$('h4.ques1 div.checkbox label input').on('change', function(){
     ques1Answer = $(this).val();
  });

Answer 1

您选择器的第一个错误'h4.ques1 div.checkbox label input'是'h4.ques1 div.checkbox label input'
DIV不是h4.ques1的子级，因此请使用：

$('div.checkbox label input')

如果使用.val()表示实际上您具有value属性，则最好分配一些name属性：

<input type="checkbox" name="Question-A-1">
<input type="checkbox" name="Question-A-2">

因此，即使您获得"on" / "off" （默认值），您也始终会知道这些值所指的name实体。

---

值得一提的是， 如果每个问题只能回答一个 ， 那么您可能会想使用单选按钮

<input type="radio" name="Question-A" value="1">
<input type="radio" name="Question-A" value="2">

在这种情况下是有意义的持有内部的var唯一的一个值，每个问题。

比将您的所有问卷包裹在<form>并使用.serialize()获得所有答案：

 $("button").click(function(){ alert( $("form#questionnary").serialize() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="questionnary"> <h4 class='ques1'>Question one here</h4> <div class="checkbox"> <label> <input type="radio" name="Question-A" value="1"> answer 1 </label> </div> <div class="checkbox"> <label> <input type="radio" name="Question-A" value="2"> answer 2 </label> </div> <h4 class='ques2'>Question two here</h4> <div class="checkbox"> <label> <input type="radio" name="Question-B" value="1"> answer 1 </label> </div> <div class="checkbox"> <label> <input type="radio" name="Question-B" value="2"> answer 2 </label> </div> </form> <button>TEST RESULTS</button>