Javascript 如何检查表单中是否单击了动态生成的单选按钮?
我正在使用php生成一个包含多项选择题的表单,现在我想通过检查是否单击了每个问题的单选按钮来检查每个问题是否都得到了回答Javascript 如何检查表单中是否单击了动态生成的单选按钮?,javascript,jquery,Javascript,Jquery,我正在使用php生成一个包含多项选择题的表单,现在我想通过检查是否单击了每个问题的单选按钮来检查每个问题是否都得到了回答 {{$question->question} $answer=$answers[$question->id] @foreach($answer作为$answer) @endforeach $(“#子”)。单击(函数(){ var检查=真; $(“输入:收音机”)。每个(函数(){ var name=$(this.attr('name'); if($((“输入:收音机[na
{{$question->question}
$answer=$answers[$question->id]
@foreach($answer作为$answer)
@endforeach
$(“#子”)。单击(函数(){
var检查=真;
$(“输入:收音机”)。每个(函数(){
var name=$(this.attr('name');
if($((“输入:收音机[name=“+name+”]:选中”).length){
检查=正确;
}否则{
检查=错误;
}
});
如果(检查){
$(“#表格1”).submit();
}否则{
swal(“Oops!”,“请在每个问题中至少选择一个答案。”,“错误”)
}
});
假设有多个问题,如您在问题下的注释中所述,那么您需要检查的.ans
元素总数与包含已检查收音机的.ans
元素的数量匹配,如下所示:
$("#sub").click(function() {
var $answers = $('.ans');
var valid = $answers.length == $answers.filter(':has(:radio:checked)').length;
if (valid ) {
$("#form1").submit();
} else {
swal("Oops!", "Please select at least one answer in each question.", "error")
}
});
作为旁注,我建议您在
表单
元素的提交
事件下执行此检查,而不是出于可访问性原因单击按钮。假设存在多个问题,如您在问题下的注释中所述,然后,您只需检查.ans
元素的总数与包含已检查收音机的.ans
元素的数量匹配,如下所示:
$("#sub").click(function() {
var $answers = $('.ans');
var valid = $answers.length == $answers.filter(':has(:radio:checked)').length;
if (valid ) {
$("#form1").submit();
} else {
swal("Oops!", "Please select at least one answer in each question.", "error")
}
});
作为旁注,我建议您在
表单
元素的提交
事件下执行此检查,而不是出于可访问性的原因单击按钮。这与往常一样,使用标准的香草Javascript很容易实现。不需要jQuery
document.forms[0]。addEventListener('submit',(事件)=>{
const check=[…document.forms[0].queryselectoral('fieldset')].every(fieldset=>!!fieldset.querySelector('input:checked'));
log(`${check'A':'nota'}所有问题都已回答!`);
//出于演示目的,请阻止提交
event.preventDefault();
//在您的代码中,您将执行检查
//if(!check)event.preventDefault();
})
form{display:flex;}
什么是1+1?
3.
1.
2.
什么是1*1?
3.
1.
2.
什么是1-1?
-1
0
1.
提交
这与往常一样,使用标准的香草Javascript很容易实现。不需要jQuery
document.forms[0]。addEventListener('submit',(事件)=>{
const check=[…document.forms[0].queryselectoral('fieldset')].every(fieldset=>!!fieldset.querySelector('input:checked'));
log(`${check'A':'nota'}所有问题都已回答!`);
//出于演示目的,请阻止提交
event.preventDefault();
//在您的代码中,您将执行检查
//if(!check)event.preventDefault();
})
form{display:flex;}
什么是1+1?
3.
1.
2.
什么是1*1?
3.
1.
2.
什么是1-1?
-1
0
1.
提交
我假设您当前的JS不工作,如果是,它做什么/不做什么?还请在问题中添加HTML示例,以便我们可以重新创建问题。在if else
中,删除check=true代码>它覆盖检查=false代码>当一个未检查的收音机后面跟着一个已检查的收音机时。是否有一个问题循环?确保任何给定问题的所有答案都具有相同的名称值。@cuongroc是的,也有一个问题循环。。。。。。我的意思是可以有10-15个问题,每个问题都有MCQ,由一个无线电按钮表示。我假设你当前的JS不工作,如果是,它做什么/不做什么?还请在问题中添加HTML示例,以便我们可以重新创建问题。在if else
中,删除check=true代码>它覆盖检查=false代码>当一个未检查的收音机后面跟着一个已检查的收音机时。是否有一个问题循环?确保任何给定问题的所有答案都具有相同的名称值。@cuongroc是的,也有一个问题循环。。。。。。我的意思是可以有10-15个问题,每个问题都有MCQ,它们由一个单选按钮表示,为什么不执行var valid=[…$('.ans')]。每个($answer=>$answer(':has(:radio:checked))
?这感觉更具可读性和简洁性。当然,这是另一种选择。但是,扩展语法会给IE带来问题。使用Array.prototype.each.call($('.ans')、函数($answer){return$answer(':has(:radio:checked);})
那么为什么不使用var valid=[…$('.ans')]呢?这感觉更具可读性和简洁性。当然,这是另一种选择。不过,扩展语法会给IE带来问题。使用Array.prototype.every.call($('.ans')、函数($answer){return$answer(':has(:radio:checked);})
。