jQuery Show/Hide <div> 用于单个页面中的多个不相关的单选按钮集

Question

我正在处理一个带有不同单选按钮集（是/否，两个选项）的长 html 表单，每个单选按钮对应于根据选择出现的单独隐藏字段。

我最初的解决方案是使用 jQuery 的 Show/Hide 函数来切换“hiddenfield”类的显示：无；通过将单选按钮的值与第二个类匹配来设置和定位包含隐藏字段的 div。但是，无论如何，我都不是 jQuery 专家，我的简单尝试无法区分不同的单选按钮集。相反，一次只能显示一个隐藏字段。所以我正在寻找一个更完整的 jQuery 或 javascript 解决方案，它允许我取消隐藏特定类（在我的情况下为隐藏字段），但前提是 div 还包含一个等于所选单选按钮值的类。所有其他隐藏字段应保持各自的隐藏/显示状态。

提前感谢您的帮助。

这是我当前的代码 sn-ps：

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetHiddenfield = $("." + inputValue);
        $(".hiddenfield").not(targetHiddenfield).hide();
        $(targetHiddenfield).show();
    });
});

.hiddenfield {display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="cta__sub cta__sub--center">Do the members want to have meetings and formal voting processes or would they prefer to act with little formality.</p>
                <div class="double">
                  <p class="half">
                    <input name="formal_yesno" type="radio" id="radio9" value="formal_yes" />
                    <label for="radio9">Yes, formal meetings and voting.</label>
                  </p>
                  <p class="half">
                    <input name="formal_yesno" type="radio" id="radio10" value="formal_no" />
                    <label for="radio10">No, we will operate informally.</label>
                  </p>
                </div>
                
                <div class="formal_yes hiddenfield">
                <p class="cta__sub cta__sub--center">Will all members be entitled to notice and to have their voice heard, or will the minimum number for a majority decision be enough?</p>
                <div class="double">
                  <p class="half">
                    <input name="formal_y_extra" type="radio" id="radio11" value="formal_y_extra_yes" />
                    <label for="radio11">Yes, all members will be notified and heard.</label>
                  </p>
                  <p class="half">
                    <input name="formal_y_extra" type="radio" id="radio12" value="formal_y_extra_yes" />
                    <label for="radio12">No, only a majority is required.</label>
                  </p>
                </div>
                </div>
                <div class="formal_no hiddenfield">
                <p class="cta__sub cta__sub--center">Will some decisions require formal meetings and voting procedures?</p>
                <div class="double">
                  <p class="half">
                    <input name="formal_n_extra" type="radio" id="radio13" value="formal_n_extra_yes" />
                    <label for="radio13">Yes</label>
                  </p>
                  <p class="half">
                    <input name="formal_n_extra" type="radio" id="radio14" value="formal_n_extra_no" />
                    <label for="radio14">No</label>
                  </p>
                </div>
                </div>
                 <div class="formal_n_extra_yes hiddenfield">
                     <p class="cta__sub cta__sub--center">Please explain</p>
                    <textarea name='message' placeholder="Formal meetings and voting will occur...." id='textarea'></textarea>
                    </div>

Answer 1

在 jQuery 中的 <script> 标记中使用它。

(.Role13).Click(function({
     (".Role9").show();
})