即使未選中，如何在單選按鈕中獲取資料-有解無憂

我正在創建一個問卷調查功能，我遇到的問題是即使未選中單選按鈕，我也需要提交他們的所有答案。

這是示例 HTML：

$('input:radio').each(function () {
  if ($(this).prop('checked')) {
    answers.push({
        question_id: $(this).attr("data-question_id"),
        answer_id: ($(this).val()== "" || $(this).val() == undefined) ? 0 : $(this).val(),
        answer_text: ($(this).parent().find('span').text()== "") ? 0 : $(this).parent().find('span').text(),
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='question_choices_wrapper'>
 <input type='radio' data-question_id='1' class='choices_settings' value="2" name='scenario_question_choices_0'>test 2
 <input type='radio' data-question_id='1' class='choices_settings' value="3" name='scenario_question_choices_0'>test 3
 <input type='radio' data-question_id='1' class='choices_settings' value="4" name='scenario_question_choices_0'>test 4
 <input type='radio' data-question_id='1' class='choices_settings' value="5" name='scenario_question_choices_0'>test 5
</div>


<div class='question_choices_wrapper'>
 <input type='radio' data-question_id='2' class='choices_settings' value="2" name='scenario_question_choices_1'>test 6
 <input type='radio' data-question_id='2' class='choices_settings' value="3" name='scenario_question_choices_1'>test 7
 <input type='radio' data-question_id='2' class='choices_settings' value="4" name='scenario_question_choices_1'>test 8
 <input type='radio' data-question_id='2' class='choices_settings' value="5" name='scenario_question_choices_1'>test 9
</div>

<div class='question_choices_wrapper'>
 <input type='radio' data-question_id='3' class='choices_settings' value="2" name='scenario_question_choices_2'>test 10
 <input type='radio' data-question_id='3' class='choices_settings' value="3" name='scenario_question_choices_2'>test 11
 <input type='radio' data-question_id='3' class='choices_settings' value="4" name='scenario_question_choices_2'>test 12
 <input type='radio' data-question_id='3' class='choices_settings' value="5" name='scenario_question_choices_2'>test 13
</div>

answers提交時我已經可以獲取所有選中的單選按鈕的值，但是當用戶提交答案時，我還想在我的陣列中推送所有未選中的唯一單選輸入。例如，如果用戶沒有回答，我只需要保存，data-question_id這樣我就可以知道什么問題根本沒有回答。

uj5u.com熱心網友回復：

試試下面的代碼，你會在提交時得到兩個 aarays。

$(".submit_ans").on('click', function() {
    var answers = [];
    var attempted_ques  = [];
    var not_attempted_ques  = [];
    $('input:radio').each(function () {
        if ($(this).prop('checked')) {
            answers.push({
                question_id: $(this).attr("data-question_id"),
                answer_id: ($(this).val()== "" || $(this).val() == undefined) ? 0 : $(this).val(),
                answer_text: ($(this).parent().find('span').text()== "") ? 0 : $(this).parent().find('span').text(),
            });
            attempted_ques.push($(this).attr("data-question_id"));
        }
        else
        {
            not_attempted_ques.push($(this).attr("data-question_id"));
        }
    });

    function uniqueArr(value, index, self) {
        return self.indexOf(value) === index;
    }

    not_attempted_ques = not_attempted_ques.filter(uniqueArr);
    not_attempted_ques = not_attempted_ques.filter(function(val) {
        return attempted_ques.indexOf(val) == -1;
    });
    console.log('Attempted Questions => ' attempted_ques);
    console.log('Not Attempted Questions => ' not_attempted_ques);
});

$(".reset_ans").on('click', function() {
    $('input:radio').prop('checked', false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='question_choices_wrapper'>
    <input type='radio' data-question_id='1' class='choices_settings' value="2" name='scenario_question_choices_0'>test 2
    <input type='radio' data-question_id='1' class='choices_settings' value="3" name='scenario_question_choices_0'>test 3
    <input type='radio' data-question_id='1' class='choices_settings' value="4" name='scenario_question_choices_0'>test 4
    <input type='radio' data-question_id='1' class='choices_settings' value="5" name='scenario_question_choices_0'>test 5
</div>


<div class='question_choices_wrapper'>
    <input type='radio' data-question_id='2' class='choices_settings' value="2" name='scenario_question_choices_1'>test 6
    <input type='radio' data-question_id='2' class='choices_settings' value="3" name='scenario_question_choices_1'>test 7
    <input type='radio' data-question_id='2' class='choices_settings' value="4" name='scenario_question_choices_1'>test 8
    <input type='radio' data-question_id='2' class='choices_settings' value="5" name='scenario_question_choices_1'>test 9
</div>

<div class='question_choices_wrapper'>
    <input type='radio' data-question_id='3' class='choices_settings' value="2" name='scenario_question_choices_2'>test 10
    <input type='radio' data-question_id='3' class='choices_settings' value="3" name='scenario_question_choices_2'>test 11
    <input type='radio' data-question_id='3' class='choices_settings' value="4" name='scenario_question_choices_2'>test 12
    <input type='radio' data-question_id='3' class='choices_settings' value="5" name='scenario_question_choices_2'>test 13
</div>

<button class="submit_ans">Submit</button>
<button class="reset_ans">Reset</button>

uj5u.com熱心網友回復：

您應該創建一個變數來存盤所有問題是否已回答。

  var allAnswer = {};

  $('input:radio').each(function () {
    let question_id = $(this).attr("data-question_id");
    if (!Object.keys(allAnswer).includes(question_id)) {
         allAnswer[question_id] = false;
    }
     
    if ($(this).prop('checked')) {
      allAnswer[question_id] = true;
      
      answers.push({
          question_id: $(this).attr("data-question_id"),
          answer_id: ($(this).val()== "" || $(this).val() == undefined) ? 0 : $(this).val(),
          answer_text: ($(this).parent().find('span').text()== "") ? 0 : $(this).parent().find('span').text(),
      });
    }
  });

如果allAnswer[i]是true表示問題i已回答，否則false表示未通過無線電檢查

uj5u.com熱心網友回復：

在 textarea 元素中傳遞值

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form>
        <div class='question_choices_wrapper'>
            <input type='radio' data-question_id='1' class='choices_settings' value="2" name='scenario_question_choices_0'>test 2
            <input type='radio' data-question_id='1' class='choices_settings' value="3" name='scenario_question_choices_0'>test 3
            <input type='radio' data-question_id='1' class='choices_settings' value="4" name='scenario_question_choices_0'>test 4
            <input type='radio' data-question_id='1' class='choices_settings' value="5" name='scenario_question_choices_0'>test 5
           </div>
           
           
           <div class='question_choices_wrapper'>
            <input type='radio' data-question_id='2' class='choices_settings' value="2" name='scenario_question_choices_1'>test 6
            <input type='radio' data-question_id='2' class='choices_settings' value="3" name='scenario_question_choices_1'>test 7
            <input type='radio' data-question_id='2' class='choices_settings' value="4" name='scenario_question_choices_1'>test 8
            <input type='radio' data-question_id='2' class='choices_settings' value="5" name='scenario_question_choices_1'>test 9
           </div>
           
           <div class='question_choices_wrapper'>
            <input type='radio' data-question_id='3' class='choices_settings' value="2" name='scenario_question_choices_2'>test 10
            <input type='radio' data-question_id='3' class='choices_settings' value="3" name='scenario_question_choices_2'>test 11
            <input type='radio' data-question_id='3' class='choices_settings' value="4" name='scenario_question_choices_2'>test 12
            <input type='radio' data-question_id='3' class='choices_settings' value="5" name='scenario_question_choices_2'>test 13
           </div>

           <!-- CHANGE TO visibility:hidden IN PRODUCTION -->
           <textarea name="allInputsRadio" width="800" height="800" style="visibility:visible"> </textarea> 
    </form>

    <script>
        const textarea = document.querySelector('textarea')
        const allInputsRadio = [...document.querySelectorAll('[type=radio]')]
        textarea.value =''
        allInputsRadio.forEach(e => {
            textarea.value  = `data-question_id: ${e.getAttribute('data-question_id')} value: ${e.getAttribute('value')}  name: ${e.getAttribute('name')}\n`
        })
    </script>
</body>
</html>

即使未選中，如何在單選按鈕中獲取資料

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497893.html

標籤：javascript jQuery

上一篇：在按鈕單擊事件上呼叫函式而不是按id

下一篇：如何讓內容顯示在其他選單選項中？