stackoom
  简体   繁体   中英

How can I get the data in the radio button even if it is not checked

 原文  2022-07-01 03:48:27  7   3    javascript/ jquery

Question

I am creating a questionnaire function, the problem that I am getting is I need to submit all of their answer even if the radio is button is not checked.

This is the sample 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>

I can already get the value of all checked radio button when submitting but I also want to push all of the unchecked unique radio input in my answers array when the user submit their answer. for instance if the user Didn't answer, I just need to save the data-question_id so I can know what question is not answered at all.

3 answers

solution1
 0  2022-07-01 04:47:44

You should create a variable to store all question is answered or not.

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

If allAnswer[i] is true means question i is answered, else false means it is NOT checked by radio

solution2
 0  2022-07-01 04:49:27

Pass the values in a textarea element

    <!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>

结果

solution3
 0 ACCPTED  2022-07-01 05:11:45

try below code you will get two aarays on submit. 

 $(".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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I get the text of radio button if radio button checked? How can I get back checked value of radio button? How can i check if the radio button is checked or not without a submit button? How can a radio button get checked by filling in a text field? How can I get the checked radio button value from a previous page in js/ How do I get the form up if the radio button is checked? (AJAX) How do I get values when radio button is checked? How do I get the value of the checked radio button? How do i get the value of the checked radio button on react,js how can i do a function when radio button is not checked
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM