Question

我有一个laravel表单，它使用JSON对象作为问题和答案选择的来源。此表单允许文本答案，单选按钮和复选框。提交后，我使用jQuery获取具有class =＆gt;响应的所有响应的值。然后将这些响应/答案附加到隐藏的textarea字段。我能够正确检索所有文本类型响应，但收音机和复选框响应不正确。我没有捕获所选的实际收音机/复选框，而是从每个收音机/复选框返回最终的JSON索引值。例如，如果某个问题有3个单选按钮选项，则为所选答案返回的值为“＆＃39; 2＆＃39;即使＆＃39; 0＆＃39; 0被选中。如何点击实际的单选按钮/复选框值？如果我能够实际存储每个索引的文本值而不是检查的索引号，那就太棒了。

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

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

1 个答案: