如何在jQuery中使用它的類獲取所選單選按鈕和複選框的值？

Question

我有一個使用JSON對象的laravel窗體，因爲它是問題和答案選擇的來源。這種形式允許文本答案，單選按鈕和複選框。提交後，我使用jQuery獲取具有class =>響應的所有響應的值。那些答覆/答案會被附加到一個隱藏的textarea字段。 我能夠正確地檢索所有文本類型的響應，但收音機和複選框的響應不正確。不是捕獲選定的實際廣播/複選框，而是從每個廣播/複選框返回最終的JSON索引值。例如，如果問題有三個單選按鈕選項，即使選擇了「0」，爲所選答案返回的值也爲'2'。如何獲得實際的單選按鈕/複選框值單擊？如果我實際上可以存儲每個索引的文本值而不是檢查索引號，那將會很棒。

我首先包含了jQuery，然後跟着它與表單的一部分。

/*Script for collecting all patient data; script for collecting questionnaire answers and submitting as JSON string*/ 
$("#formq").submit(function(){  
    $("#formq").append("<textarea name='answers' id='answers' hidden='hidden'></textarea>"); 
    var answers = new Object(); 
    $(".response").each(function(){ 
     answers[$(this).attr('name')] = $(this).val(); 
    }); 
//Change answers object into json string; place answers into textarea and submit form 
    $("#answers").text(JSON.stringify(answers)); 

<div class="form-group"> 
    @foreach($jsonObject['questions']['english'] as $key =>$question) 
     {{ Form::label('questions', $question['question'], array('class' => 'col-sm-9 display-label')) }} 
     @if(($jsonObject['question_metadata'][$key]['multi_value']) == false) 
      @if(($jsonObject['question_metadata'][$key]['text_value']) == true)       
       <div class="col-sm-8" style="padding-bottom: 15px;">         
        {{ Form::text($key, null, array('class' => 'form-control response')) }}  
       </div> 
      @elseif(($jsonObject['question_metadata'][$key]['text_value']) == false) 
       <div class="col-sm-9" style="padding-right: 15px"> 
        @foreach($question['choices'] as $key2 => $choice) 
        <div class="col-sm-9 radio" style="padding-bottom: 15px"> 
         {{ Form::radio($key, $key2, null, array('class' => 'response')) }} {{$choice}} 
        </div>     
        @endforeach 
       </div> 
      @endif 
     @elseif(($jsonObject['question_metadata'][$key]['multi_value']) == true)       
      <div class="col-sm-9" style="padding-right: 15px"> 
       @foreach($question['choices'] as $key3 => $choice) 
       <div class="col-sm-9 checkbox" style="padding-bottom: 15px"> 
        {{ Form::checkbox($key, $key3, null, array('class' => 'response')) }} {{ $choice }} 
       </div> 
       @endforeach 
      </div>   
     @endif 
    @endforeach 

JSON snippet 
{ 
    "questions": { 
    "english": [ 
    { 
     "question": "5. This question will provide a text box:" 
    }, 
    { 
    "question": "6. Another text box question:" 
    }, 
    { 
    "question": "7. This question will provide checkboxes so multiple items can be chosen:", 
    "choices": { 
     "0": "Option1", 
     "1": "Option 2", 
     "2": "Option 3", 
     "3": "Option 4", 
     "4": "Option 5", 
     "5": "Option 6", 
     "6": "Other" 
    } 
    }, 
    { 
    "question": "8. This question will provide radio buttons:", 
    "choices": { 
     "0": "No", 
     "1": "Yes" 
    } 
    }, 

Answer 1

你可以改變你的jQuery代碼如下這簡直是將值元素是否文本框，否則檢查或者不進行無線電和複選框。

var answers = new Object(); 
$(".response").each(function(){ 
    if($(this).is('[type="text"]') || $(this).is(':checked')) { 
     answers[$(this).attr('name')] = $(this).val(); 
    } 
}); 

上面的代碼將取代前一值來選擇多個複選框時，這樣就可以檢查是否值存在複選框並作爲逗號分隔(,)如下面附加的價值。

var answers = new Object(); 
$(".response").each(function(){ 
    if($(this).is('[type="text"]') || $(this).is(':checked')) { 
     if(answers[$(this).attr('name')]) { 
     answers[$(this).attr('name')] += ', '; 
     } else { 
     answers[$(this).attr('name')] = ''; 
     } 

     answers[$(this).attr('name')] += $(this).val(); 
    } 
});