OnClick, отобразите div с флажком с jQuery

Question

Вот это HTML:

$('.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');
        $('.sub-question :input[type="radio"], .sub-question :input[type="checkbox"]').each(function(index){
            $(this).prop('checked', false);
        });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-step="1">
    <h3>Question 1:</h3>
    <div class="form-group form-group-outer">
        <label class="container_checkbox">I want bananas
            <input type="checkbox" name="q1[]" value="1" class="required">
            <span class="checkmark"></span>
        </label>
    </div>
    <div class="form-group form-group-outer">
        <label class="container_checkbox">I want pears
            <input type="checkbox" name="q1[]" value="2" class="required">
            <span class="checkmark"></span>
        </label>
    </div>
    <div class="form-group form-group-outer">
        <label class="container_checkbox">I want apples
            <input type="checkbox" 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_checkbox">Red
                    <input type="checkbox" name="q1_1[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="form-group col-12">
                <label class="container_checkbox">Green
                    <input type="checkbox" name="q1_1[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="form-group col-12">
                <label class="container_checkbox">Yellow
                    <input type="checkbox" name="q1_1[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>
    </div>
</div>

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

Проблема в том, что когда я снимаю 3-й флажок, подуровень не скрывается.

В чем моя проблема, пожалуйста.

Вот jsFiddle, если нужно: https://jsfiddle.net/a8rwqe9k/

Спасибо.

Answer 1

Я думаю, вы слишком усложнили это с помощью .css(). Есть функции show() и hide() с jQuery, которые я использовал в своем ответе. Если у вас есть какие-либо вопросы, не стесняйтесь отвечать.

EDIT: исходный вопрос вырос из комментариев. Правки отражают желаемые изменения.

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

    
  var qID = $(this).attr('name').replace("[]", "");
  var sID = qID.concat("_");
  var el = $(this).closest('.form-group').find('.sub-question');

  if ($(this).is(':checked')) {
      $('.sub-question.' + qID).hide();
    $('input[name^=' + sID + ']').prop('checked', false);
    el.show();
  } else {
    el.hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-step="1">
    <h3>Question 1:</h3>
    <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 q1" 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[]" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="form-group col-12">
                <label class="container_radio">Green
                    <input type="radio" name="q1_2[]" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="form-group col-12">
                <label class="container_radio">Yellow
                    <input type="radio" name="q1_3[]" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>
    </div>
</div>



<div data-step="1">
    <h3>Question 2:</h3>
    <div class="form-group form-group-outer">
        <label class="container_checkbox">I want bananas
            <input type="checkbox" name="q2[]" value="1" class="required">
            <span class="checkmark"></span>
        </label>
    </div>
    <div class="form-group form-group-outer">
        <label class="container_checkbox">I want pears
            <input type="checkbox" name="q2[]" value="2" class="required">
            <span class="checkmark"></span>
        </label>
    </div>
    <div class="form-group form-group-outer">
        <label class="container_checkbox">I want apples
            <input type="checkbox" name="q2[]" value="3" class="required">
            <span class="checkmark"></span>
        </label>
        <div class="row sub-question q2" style="display: none">
            <h3 class="col-12">What color do you want?</h3>
            <div class="form-group col-12">
                <label class="container_checkbox">Red
                    <input type="checkbox" name="q2_1[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="form-group col-12">
                <label class="container_checkbox">Green
                    <input type="checkbox" name="q2_2[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="form-group col-12">
                <label class="container_checkbox">Yellow
                    <input type="checkbox" name="q2_3[]" value="1" class="required">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>
    </div>
</div>

Answer 2

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

Ваше состояние должно выглядеть как

if(el.length > 0 && el.is(':hidden')) { ...

, также я предлагаю вам измените .css('display' на методы jQuery .show () и .hide () .

Не используйте .css для отображения / скрытия, как это.