Wordpress/Gravity Forms - How to show/hide items in a single <ul> list based on a checkbox being checked?

Question

I'm using Gravity Forms within a Wordpress installation and I'm attempting to create a parent/child-like structure within a single list of checkboxes. To clarify the structure I'm aiming for, note that there are 13 parent items, each of which has about 30 child items.

The goal is, whenever the checkbox next to one of the parent items is selected, the ~30 child items underneath that particular parent appear so they can be checked as well.

So, when the user first loads the page, the only items that would be immediately visible are the parent items.

The difficulty here is that I can only work within a single unordered list, I cannot have multiple lists. Additionally, I cannot change the class of each list item, I have to work with the existing unique class assigned to each list item.

I've been experimenting with some CSS/Java/JQuery solutions but I wanted to see what the community here thought would be the best way to approach this.

Here is an example of the HTML that makes up the list:

<ul class="gfield_checkbox" id="input_4_67"><li class="gchoice_4_67_1">
                            <input name="input_67.1" type="checkbox" value="1160" id="choice_4_67_1" tabindex="3">
                            <label for="choice_4_67_1" id="label_4_67_1">3-D Printing</label>
                        </li><li class="gchoice_4_67_2">
                            <input name="input_67.2" type="checkbox" value="512" id="choice_4_67_2" tabindex="4">
                            <label for="choice_4_67_2" id="label_4_67_2">3-D Technology: Rapid Manufacturing/Prototyping Equipment</label>
                        </li><li class="gchoice_4_67_3">
                            <input name="input_67.3" type="checkbox" value="962" id="choice_4_67_3" tabindex="5">
                            <label for="choice_4_67_3" id="label_4_67_3">Additives: Accelerators</label>
                        </li><li class="gchoice_4_67_4">
                            <input name="input_67.4" type="checkbox" value="963" id="choice_4_67_4" tabindex="6">
                            <label for="choice_4_67_4" id="label_4_67_4">Additives: Antiblocking Agents</label>
                        </li><li class="gchoice_4_67_5">
                            <input name="input_67.5" type="checkbox" value="964" id="choice_4_67_5" tabindex="7">
                            <label for="choice_4_67_5" id="label_4_67_5">Additives: Antifogging agents</label>
                        </li>
          </ul>

An example of what I'm trying to accomplish would be, when the checkbox next to gchoice_4_67_1 is selected, gchoice_4_67_2, gchoice_4_67_3, gchoice_4_67_4, ..., gchoice_4_67_20 would appear. When the checkbox is unselected, those list items would hide.

I've been playing around with this code, but it only works for one class. Is there a way I can get this to work for multiple classes? Maybe an array of some sort? Pardon my unfamiliarity with jQuery.

jQuery(function ($) {
    var checkbox = $('.gchoice_4_67_1');
    var dependent = $('.gchoice_4_67_2');
    if (checkbox.attr('checked') !== undefined){
         dependent.show();
    } else {
            dependent.hide();
    }

    checkbox.change(function(e){
         dependent.toggle();
    });
});

Thank you so much for any assistance you can provide, it's greatly, greatly appreciated!

Answer 1

jQuery(function ($) {
    var trigger = $('#choice_4_67_1');
    trigger.change(function(){
        if ( $(this).is(":checked") ) {
            $('.gfield_checkbox input[id^="choice_4_67_"]').parent().show();
        } else {
            $('.gfield_checkbox input[id^="choice_4_67_"]').parent().hide();
        }
    })

});

^= basically says that it would match any id that starts with "choice_4_67_". I think it should resolve your problem.