如何使用 jQuery 中的 class 获取选定单选按钮和复选框的值？

Question

我有一个 laravel 表单，它使用 JSON 对象作为问题和答案选择的来源。此表单允许文本答案、单选按钮和复选框。提交后，我使用 jQuery 获取所有具有 class=> 响应的响应的值。然后将那些 responses/answers 附加到隐藏的文本区域字段。我能够正确检索所有文本类型的响应，但是单选和复选框响应不正确。我没有捕获实际选择的 radio/checkbox，而是返回每个 radio/checkbox 的最终 JSON 索引值。例如，如果一个问题有 3 个单选按钮选项，则即使选择了“0”，所选答案的返回值也是“2”。如何获得实际的 radio button/checkbox 值？如果我真的可以存储每个索引的文本值而不是检查的索引号，那就太好了。

我先包含了 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();
   }
});

The above code will replace the previous value when multiple checkboxes selected, so you can check if value exists for checkbox and append the value as comma (,) separated as below.

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

如何使用 jQuery 中的 class 获取选定单选按钮和复选框的值？

How to get the value of a selected radio button and checkbox using its class in jQuery?

jquery

laravel-4