jQuery Показать / Скрыть <div>для нескольких не связанных наборов переключателей на одной странице

Question

Я работаю над длинной формой html с различными наборами переключателей (да / нет, две опции), каждый из которых соответствует отдельным скрытым полям, которые появляются в зависимости от выбора.

Моим первоначальным решением было использование функции Show / Hide jQuery для переключения отображения класса «скрытое поле»: нет; установка и целевые элементы div, содержащие скрытые поля, путем сопоставления значения переключателей со вторым классом. Однако я ни в коем случае не являюсь экспертом jQuery, и моя простая попытка не может различить разные наборы переключателей. Вместо этого одновременно может быть отображено только одно скрытое поле. Поэтому я ищу более полное решение jQuery или javascript, которое позволит мне отобразить указанный класс c (скрытое поле в моем случае), но только если 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();
})