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

Question

我有一个 laravel 表单，它使用 JSON 对象作为问题和答案选择的来源。此表单允许文本答案、单选按钮和复选框。提交后，我使用 jQuery 获取所有具有 class=>response 的响应的值。然后将这些响应/答案附加到隐藏的文本区域字段。 我能够正确检索所有文本类型的响应，但是单选和复选框响应不正确。我没有捕获实际选择的单选/复选框，而是从每个单选/复选框返回最终的 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();
   }
});