Show/Hide Checkout Fields according to answer to previous question

Question

I use a multi-step checkout plugin.

I ask customers if they have allergies, using checkboxes. The first checkbox is none followed by chicken, beef etc.

I wish to remove the none checkbox option and ask that question before this. e.g. I wish to ask "do you have dietary requirements?" and handle the yes or no as a radio button.

I wish to hide the checkbox allergies options by default, and only show this question if the customer selects yes in the question above. I would appreciate advice.

Is it advised or bad to use something like this?

$('.dietary_restrictions').click(function() {
    if($(this).is(":checked")) {
        $('.additional_allergies').show();
    } else {
        $('.additional_allergies').hide();
    }
})

Additionally, my checkout plugin does support conditional questions but the options for showing and hiding questions is a drop-down which allows me to show and hide based only on the customer or product, not based on questions or answers.

Answer 1

I used this and it worked.

<script type="text/javascript">
$('#dietary_restrictions').click(function() {
    if($(this).is(":checked")) {
        $('#additional_allergies_field').show();
    } else {
        $('#additional_allergies_field').hide();
    }
})
</script>

and I had to set css to hide the ID by default.

Answer 2

its jquery and you need to place inside and use jQuery instead of $

<script>
function dietary_restrictions() {
    jQuery('input#dietary_restrictions').click(function() {
        if(jQuery(this).is(":checked")) {
            jQuery('input#additional_allergies_field').show();
        } else {
            jQuery('input#additional_allergies_field').hide();
        }
}
</script>

or just paste it in your .js file inside a jQuery(document).ready({});