Измените отображение, щелкнув радиокнопку с jQuery

Question

У меня мало переключателей, и последний управляет отображением другого набора переключателей.

Если пользователь нажимает на последний (тот, у которого есть подуровень .sub-question), я хотите отобразить переключатели подуровня.

Моя проблема: на самом деле, если пользователь нажимает на переключатель подуровня, он скрывает часть .sub-question.

То, что я использовал:

$('.form-group > label').find(' > input:checkbox, > input:radio').on('click', function() {

    el = $(this).closest('.form-group').find('.sub-question');

    if(el.length > 0) {
        el.css('display', 'block');
    }
    else {
        $('.sub-question').css('display', 'none');
    }
});

My HTML это следующее:

...
<div class="form-group">
    <label>Item A
        <input type="radio">
    </label>
</div>
<div class="form-group">
    <label>Item B
        <input type="radio">
    </label>
    <div class="row sub-question">
        <div class="form-group">
            <label class="container_radio">Sub level 1
                <input type="radio">
            </label>
        </div>
    </div>
</div>
...

Complete HTML находится в этом jsFiddle: https://jsfiddle.net/fkL4dnj1/

Но это не работает.

Не могли бы вы мне помочь?

Спасибо.

Answer 1

Проблема в том, что ваши вторичные радиокнопки имеют родителя 'form-group', поэтому они обрабатываются как первичные радиокнопки.

Вы можете указать дополнительный класс для первых трех радиокнопок и обновить обработчик кликов:

<input type="radio" name="q1[]" value="2" class="required main_question">

$('.form-group > label').find(' > input:checkbox.main_question, > input:radio.main_question').on('click', function() {
   /// ...
});

Вот обновленная скрипка: https://jsfiddle.net/op6fy842/

Answer 2

Вот рабочая версия. Вы можете различать элементы ввода внешней формы, добавляя теги классов.

$('.form-group-outer > label').find(' > input:checkbox, > input:radio').on('click', function() {

    el = $(this).closest('.form-group').find('.sub-question');

    if(el.length > 0) {
        el.css('display', 'block');
    }
    else {
        $('.sub-question').css('display', 'none');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-step="1">
    <h3>Question 1:</h3>
    <!--<p class="lead">asasa sad sda dasdasdasdasdasdsadsadsa</p>-->
    <div class="form-group form-group-outer">
        <label class="container_radio">I want bananas
            <input type="radio" name="q1[]" value="1" class="required">
            <span class="checkmark"></span>
        </label>
    </div>
    <div class="form-group form-group-outer">
        <label class="container_radio">I want pears
            <input type="radio" name="q1[]" value="2" class="required">
            <span class="checkmark"></span>
        </label>
    </div>
    <div class="form-group form-group-outer">
        <label class="container_radio">I want apples
            <input type="radio" name="q1[]" value="3" class="required">
            <span class="checkmark"></span>
        </label>
        <div class="row sub-question" style="display: none">
            <h3 class="col-12">What color do you want?</h3>
            <div class="form-group col-12">
                <label class="container_radio">Red
                    <input type="radio" name="q1_1[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="form-group col-12">
                <label class="container_radio">Green
                    <input type="radio" name="q1_1[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="form-group col-12">
                <label class="container_radio">Yellow
                    <input type="radio" name="q1_1[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>
    </div>
</div>

---

---