如何在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(); 
    } 
});