即使未選中，如何在單選按鈕中獲取數據
[英]How can I get the data in the radio button even if it is not checked
問題描述
我正在創建一個問卷調查功能，我遇到的問題是即使未選中單選按鈕，我也需要提交他們的所有答案。
這是示例 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 ，這樣我就可以知道什么問題根本沒有回答。
3 個解決方案
解決方案1
0 2022-07-01 04:47:44
您應該創建一個變量來存儲所有問題是否已回答。
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表示未通過無線電檢查
解決方案2
0 2022-07-01 04:49:27
在 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>
解決方案3
0 已采納 2022-07-01 05:11:45
試試下面的代碼，你會在提交時得到兩個 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>
如何在沒有提交按鈕的情況下檢查單選按鈕是否被選中？
[英]How can i check if the radio button is checked or not without a submit button?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.