jQuery 显示/隐藏单个页面中多个不相关的单选按钮集的

Question

我正在开发一个长 html 表单，其中包含不同组的单选按钮(是/否，两个选项)，每组对应于根据选择出现的单独隐藏字段。

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

感谢您提前提供的帮助。

这是我当前的代码片段:

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