Wordpress/Gravity 表单 - 如何 show/hide 基于选中的单选按钮的项目？

Question

我正在尝试 show/hide div 基于重力表单中单选按钮字段中的输入。我使用 jQuery here 找到了一个答案，它非常适合复选框，但是，当我尝试用单选按钮做同样的事情时，它会执行第一部分并隐藏 div 一次已选中，但一旦取消选中单选按钮，它就不会再次显示 div。

这是我正在使用的jQuery：

jQuery(function ($) {
   var trigger = $('#choice_13_1_0');
   trigger.change(function(){
       if ( $(this).is(":checked") ) {
           jQuery(".conditional-display").hide();
       } else {
           jQuery(".conditional-display").show();
       }
   });
});

这是重力形成产生的HTML：

<ul class="gfield_radio" id="input_13_1">
<li class="gchoice_13_1_0">
    <input name="input_1" type="radio" value="Option One" id="choice_13_1_0" tabindex="1">
    <label for="choice_13_1_0" id="label_13_1_0">
        Option One
    </label>
</li>
<li class="gchoice_13_1_1">
    <input name="input_1" type="radio" value="Option Two" id="choice_13_1_1" tabindex="2">
    <label for="choice_13_1_1" id="label_13_1_1">
        Option Two
    </label>
</li>
<li class="gchoice_13_1_2">
    <input name="input_1" type="radio" value="Option Three" id="choice_13_1_2" tabindex="3">
    <label for="choice_13_1_2" id="label_13_1_2">
        Option Three
    </label>
</li>

我把这个 div 放在页面的其他地方：

<div class="conditional-display">
    Content to conditionally display based on radio field selection
</div>

在这个例子中应该发生的是 div 将在选择选项一时隐藏，然后在选择选项二或三时再次显示。

Answer 1

假设您希望在单击第一个单选按钮时隐藏条件 div...

按名称将事件处理程序添加到单选按钮组。然后使用 toggle 和条件来确定 div 是否可见。

jQuery(function ($) {
   var trigger = $('[name=input_1]');
   trigger.change(function(){
       jQuery(".conditional-display").toggle(this.id !== "choice_13_1_0")       
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul class="gfield_radio" id="input_13_1">
<li class="gchoice_13_1_0">
    <input name="input_1" type="radio" value="Option One" id="choice_13_1_0" tabindex="1">
    <label for="choice_13_1_0" id="label_13_1_0">
        Option One
    </label>
</li>
<li class="gchoice_13_1_1">
    <input name="input_1" type="radio" value="Option Two" id="choice_13_1_1" tabindex="2">
    <label for="choice_13_1_1" id="label_13_1_1">
        Option Two
    </label>
</li>
<li class="gchoice_13_1_2">
    <input name="input_1" type="radio" value="Option Three" id="choice_13_1_2" tabindex="3">
    <label for="choice_13_1_2" id="label_13_1_2">
        Option Three
    </label>
</li>


<div class="conditional-display">
    Content to conditionally display based on radio field selection
</div>

Wordpress/Gravity 表单 - 如何 show/hide 基于选中的单选按钮的项目？

Wordpress/Gravity Forms - How to show/hide items based on a radio button being checked?

wordpress

jquery

gravity-forms-plugin

gravityforms