jQueryのクラスを使用して、選択したラジオボタンとチェックボックスの値を取得する方法は？

Question

私は、質問と回答の選択肢のソースとしてJSONオブジェクトを使用するララールフォームを持っています。このフォームでは、テキストの回答、ラジオボタン、チェックボックスを使用できます。投稿時に、jQueryを使用して、クラス=>レスポンスを持つすべてのレスポンスの値を取得します。これらの応答/応答は、隠されたテキストエリアに追加されます。 すべてのテキストタイプの応答を正しく取得できますが、ラジオとチェックボックスの応答は正しくありません。選択された実際のラジオ/チェックボックスをキャプチャする代わりに、各ラジオ/チェックボックスから最終的なJSONインデックス値を返しています。たとえば、質問に3つのラジオボタンオプションがある場合、「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(); 
    } 
});