Using JQuery to Dynamically Add Checkboxes and Validate them

Question

I am building a form with two radio buttons, yes and no.

When the yes radio button is selected a set of checkboxes (set A) appears and when no is selected, a different set of checkboxes (Set B) appears on my form.

For either set of checkboxes, A or B, at least one checkbox must be selected.

I must use JQuery to solve this issue.

Currently, I am able to get either set A or B checkboxes to appear, but I am unable to write to validation code to check that at least one checkbox is selected in A or B depending on the yes/no answer.

My intuition was to use a change or click event handler, but that would mean writing event handlers for each checkbox which seems verbose and redundant. Is there a JQuery way to do this efficiently for a group of dynamic checkboxes?

<li><span style='color:black;'><strong>1. Yes or No? &nbsp;&nbsp;&nbsp;&nbsp;?</strong><br />
                  <li>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="Q1_0" id="Q1_0a" value="yes" /><label for="Q1_0a">     Yes</label></span><br />
                  <li>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If Yes: <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Select all that apply:</strong><br />
                  <li class="Q1_Y">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="Q2" id="Q2_0" value="Ans1" /><label for="Q2_01">Ans1</label>&nbsp;&nbsp;&nbsp;
                  <li class="Q1_Y">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="Q2" id="Q2_1" value="Ans2" /><label for="Q2_02">Ans2</label>&nbsp;&nbsp;&nbsp;
                  <li class="Q1_Y">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="Q2" id="Q2_2" value="Ans3" /><label for="Q2_03">Ans3</label>&nbsp;&nbsp;&nbsp;


               <li class="Q1_N"><span style='color:black;'><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If No: <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Select all that apply:<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Select all that apply:</strong><br />
                  <li class="Q1_N">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="Q3" id="Q3_0" value="Ans1" /><label for="Q3_0">Ans1</label>&nbsp;&nbsp;&nbsp;
                  <li class="Q1_N">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="Q3" id="Q3_1" value="Ans2" /><label for="Q3_1">Ans2</label>&nbsp;&nbsp;&nbsp;
                  <li class="Q1_N">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="Q3" id="Q3_2" value="Ans3" /><label for="Q3_2">Ans3</label>&nbsp;&nbsp;&nbsp;

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( { rules: {

        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');
});

});

Answer 1

Just use some to check if one is selected:

if ($(".setA").some(e => e.is(":checked"))) { /* Checkbox is valid */ }

EDIT

If you want this to happen for any checkbox:

$("input").change() {
    //Validation code above for A and B
});