我正在构建一个带有两个单选按钮的表单，是和否。
当选中“是”单选按钮时，将出现一组复选框（A组），而当选择“否”时，我的表单上将出现另一组复选框（B组）。
对于一组复选框A或B，必须至少选择一个复选框。
我必须使用JQuery来解决此问题。
当前，我能够显示设置A或B的复选框，但是我无法写入验证代码来检查是A还是B中是否选择了至少一个复选框，具体取决于是/否答案。< / p>
我的直觉是使用更改或单击事件处理程序，但这意味着为每个复选框编写事件处理程序，这似乎很冗长和多余。是否有一种JQuery方法可以对一组动态复选框有效地做到这一点？
<li><span style='color:black;'><strong>1. Yes or No? ?</strong><br />
<li> <input type="radio" name="Q1_0" id="Q1_0a" value="yes" /><label for="Q1_0a"> Yes</label></span><br />
<li> <input type="radio" name="Q1_0" id="Q1_0b" value="no" /><label for="Q1_0b"> No</label><br />
<li class="Q1_Y"><span style='color:black;'><strong> If Yes: <br/> Select all that apply:</strong><br />
<li class="Q1_Y"> <input type="checkbox" name="Q2" id="Q2_0" value="Ans1" /><label for="Q2_01">Ans1</label>
<li class="Q1_Y"> <input type="checkbox" name="Q2" id="Q2_1" value="Ans2" /><label for="Q2_02">Ans2</label>
<li class="Q1_Y"> <input type="checkbox" name="Q2" id="Q2_2" value="Ans3" /><label for="Q2_03">Ans3</label>
<li class="Q1_N"><span style='color:black;'><strong> If No: <br/> Select all that apply:<br/> Select all that apply:</strong><br />
<li class="Q1_N"> <input type="checkbox" name="Q3" id="Q3_0" value="Ans1" /><label for="Q3_0">Ans1</label>
<li class="Q1_N"> <input type="checkbox" name="Q3" id="Q3_1" value="Ans2" /><label for="Q3_1">Ans2</label>
<li class="Q1_N"> <input type="checkbox" name="Q3" id="Q3_2" value="Ans3" /><label for="Q3_2">Ans3</label>
jQuery(document).ready(function() {
jQuery(".Q1_Y").hide();
jQuery(".Q1_N").hide();
jQuery.validator.addMethod("checkboxesQ2", function(value, element) {
return jQuery('input[name="Q2"]:checked').length > 0;
});
jQuery.validator.addMethod("checkboxesQ3", function(value, element) {
return jQuery('input[name="Q3"]:checked').length > 0;
});
jQuery（“＃ddd-form”）.validate（{ 规则：{
Q2_0 : { checkboxesQ2: true },
Q2_1 : { checkboxesQ2: true },
Q2_2 : { checkboxesQ2: true },
Q2_3 : { checkboxesQ2: true },
Q2_4 : { checkboxesQ2: true },
Q2_5 : { checkboxesQ2: true },
Q2_6 : { checkboxesQ2: true },
Q3_0 : { checkboxesQ3: true },
Q3_1 : { checkboxesQ3: true },
Q3_2 : { checkboxesQ3: true },
Q3_3 : { checkboxesQ3: true },
Q3_4 : { checkboxesQ3: true },
Q3_5 : { checkboxesQ3: true },
Q3_6 : { checkboxesQ3: true },
},
messages: {
Q2_0 : { required: "<span>*</span>" },
Q2_1 : { required: "<span>*</span>" },
Q2_2 : { required: "<span>*</span>" },
Q2_3 : { required: "<span>*</span>" },
Q2_4 : { required: "<span>*</span>" },
Q2_5 : { required: "<span>*</span>" },
Q2_6 : { required: "<span>*</span>" },
Q3_0 : { required: "<span>*</span>" },
Q3_1 : { required: "<span>*</span>" },
Q3_2 : { required: "<span>*</span>" },
Q3_3 : { required: "<span>*</span>" },
Q3_4 : { required: "<span>*</span>" },
Q3_5 : { required: "<span>*</span>" },
Q3_6 : { required: "<span>*</span>" },
},
submitHandler: function(form) {
form.submit();
},
errorElement: "em",
errorPlacement: function(error, element) {
console.log("error",error)
console.log("element",element)
error.appendTo( element.parents("li").prev("li").find('span') );
},
}）;
jQuery('#Q1_0a').click(function(e) {
jQuery( ".Q1_Y" ).show();
jQuery( ".Q1_N" ).hide();
jQuery('[name=Q2_0').rules('add', {
checkboxes: true,
messages: { checkboxesQ2: "<span>*</span>" }
});
jQuery('[name=Q2_1').rules('add', {
checkboxes: true,
messages: { checkboxesQ2: "<span>*</span>" }
});
jQuery('[name=Q2_2').rules('add', {
checkboxes: true,
messages: { checkboxesQ2: "<span>*</span>" }
});
jQuery('[name=Q2_3').rules('add', {
checkboxes: true,
messages: { checkboxesQ2: "<span>*</span>" }
});
jQuery('[name=Q2_4').rules('add', {
checkboxes: true,
messages: { checkboxesQ2: "<span>*</span>" }
});
jQuery('[name=Q2_5').rules('add', {
checkboxes: true,
messages: { checkboxesQ2: "<span>*</span>" }
});
jQuery('[name=Q2_6').rules('add', {
checkboxes: true,
messages: { checkboxesQ2: "<span>*</span>" }
});
jQuery('[realName=Q3_0').rules('remove','checkboxesQ3');
jQuery('[realName=Q3_1').rules('remove','checkboxesQ3');
jQuery('[realName=Q3_2').rules('remove','checkboxesQ3');
jQuery('[realName=Q3_3').rules('remove','checkboxesQ3');
jQuery('[realName=Q3_4').rules('remove','checkboxesQ3');
jQuery('[realName=Q3_5').rules('remove','checkboxesQ3');
jQuery('[realName=Q3_6').rules('remove','checkboxesQ3');
});
jQuery('#Q1_0b').click(function(e) {
jQuery( ".Q1_Y" ).hide();
jQuery( ".Q1_N" ).show();
jQuery('[name=Q3_0').rules('add', {
checkboxes: true,
messages: { checkboxesQ3: "<span>*</span>" }
});
jQuery('[name=Q3_1').rules('add', {
checkboxes: true,
messages: { checkboxesQ3: "<span>*</span>" }
});
jQuery('[name=Q3_2').rules('add', {
checkboxes: true,
messages: { checkboxesQ3: "<span>*</span>" }
});
jQuery('[name=Q3_3').rules('add', {
checkboxes: true,
messages: { checkboxesQ3: "<span>*</span>" }
});
jQuery('[name=Q3_4').rules('add', {
checkboxes: true,
messages: { checkboxesQ3: "<span>*</span>" }
});
jQuery('[name=Q3_5').rules('add', {
checkboxes: true,
messages: { checkboxesQ3: "<span>*</span>" }
});
jQuery('[name=Q3_6').rules('add', {
checkboxes: true,
messages: { checkboxesQ3: "<span>*</span>" }
});
jQuery('[realName=Q2_0').rules('remove','checkboxesQ2');
jQuery('[realName=Q2_1').rules('remove','checkboxesQ2');
jQuery('[realName=Q2_2').rules('remove','checkboxesQ2');
jQuery('[realName=Q2_3').rules('remove','checkboxesQ2');
jQuery('[realName=Q2_4').rules('remove','checkboxesQ2');
jQuery('[realName=Q2_5').rules('remove','checkboxesQ2');
jQuery('[realName=Q2_6').rules('remove','checkboxesQ2');
});
}）;