獲取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'
的DIV不是h4.ques1一個孩子這麼用：

$('div.checkbox label input') 

如果使用.val()這意味着，實際上你有一個值屬性，否則你最好指定一些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只有一個每題的價值。

比包裝所有的questionnary一個<form>內使用.serialize() FO得到所有的答案：

$("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>