javascript - Wordpress/Gravity Forms - 如何根据选中的复选框显示/隐藏单个 列表中的元素？

Question

我在 Wordpress 安装中使用 Gravity Forms，我试图在单个复选框列表中创建类似父/子的结构。为了阐明我的目标结构，请注意有 13 个父项，每个父项有大约 30 个子项。

目标是，只要选中其中一个父项旁边的复选框，就会显示该特定父项下方的约 30 个子项，以便也可以选中它们。

因此，当用户首次加载页面时，唯一立即可见的元素是父元素。

这里的困难是我只能在一个无序列表中工作，我不能有多个列表。此外，我无法更改每个列表项的类，我必须使用分配给每个列表项的现有唯一类。

我一直在试验一些 CSS/Java/JQuery 解决方案，但我想看看这里的社区认为什么是解决这个问题的最佳方法。

这是构成列表的 HTML 示例:

<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>

我试图完成的一个例子是，当选中 gchoice_4_67_1 旁边的复选框时，gchoice_4_67_2、gchoice_4_67_3、gchoice_4_67_4、...、gchoice_4_67_20会出现。取消选中该复选框时，这些列表项将隐藏。

我一直在研究这段代码，但它只适用于一个类(class)。有什么办法可以让它适用于多个类(class)吗？也许是某种数组？请原谅我对 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();
    });
});

非常感谢您提供的任何帮助，非常感谢!

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

});

^= 基本上表示它会匹配任何以“choice_4_67_”开头的 ID。我认为它应该可以解决您的问题。