Управляйте отображением div, установив флажок и rad ios in jQuery

Question

У меня несколько HTML блоков, содержащих переключатели или флажки.

Для некоторых ответов отображается другая группа переключателей или флажков.

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

jsFiddler находится здесь: https://jsfiddle.net/j8n4rhug/

$('.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" class="tab">
    <h3>Question 1</h3>
    <div class="form-group form-group-outer">
        <label class="container_check">Answer 1
            <input type="checkbox" name="q1[]" value="1" class="required">
            <span class="checkmark"></span>
        </label>
        <div class="row sub-question" style="display:none">
            <h3 class="col-12">Specify answer for Answer 1</h3>
            <div class="row">    
                <div class="form-group col-4">
                    <label class="container_radio">1 text
                        <input type="radio" name="q1_1[]" value="1" class="required">
                        <span class="checkmark"></span>
                    </label>
                </div>
                <div class="form-group col-4">
                    <label class="container_radio">2 texts
                        <input type="radio" name="q1_1[]" value="2" class="required">
                        <span class="checkmark"></span>
                    </label>
                </div>
                <div class="form-group col-4">
                    <label class="container_radio">3 texts
                        <input type="radio" name="q1_1[]" value="3" class="required">
                        <span class="checkmark"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group form-group-outer">
        <label class="container_check">Answer 2
            <input type="checkbox" name="q2[]" value="2" class="required">
            <span class="checkmark"></span>
        </label>
        <div class="row sub-question" style="display:none">
            <h3 class="col-12">Specify answer for Answer 2</h3>
            <div class="row"> 
                <div class="form-group col-4">
                    <label class="container_check">Textes
                        <input type="checkbox" name="q2_1[]" value="1">
                        <span class="checkmark"></span>
                    </label>
                </div>
                <div class="form-group col-4">
                    <label class="container_check">Photos
                        <input type="checkbox" name="q2_1[]" value="2">
                        <span class="checkmark"></span>
                    </label>
                </div>
                <div class="form-group col-4">
                    <label class="container_check">Vidéos
                        <input type="checkbox" name="q2_1[]" value="3">
                        <span class="checkmark"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="container_check">Answer 3
            <input type="checkbox" name="q3[]" value="3" class="required">
            <span class="checkmark"></span>
        </label>
    </div>
</div>

Answer 1

• Создайте CSS класс is-hidden с display: none; и назначьте его каждому подвопросу
• На "change" - итерация каждой группы, проверяемой, чтобы получить ее подвопрос
• Используйте .toggleClass("is-hidden", this.value) в этом элементе подвопроса

$('.form-group-outer').each(function() {

  const $inp = $(this).find(":radio, :checkbox");

  $inp.on("change", function() {
    $inp.each(function() {
      $(this).closest(".form-group").find(".sub-question").toggleClass("is-hidden", !this.checked);
    });
  });

});

.is-hidden {
  display: none;
}

<div data-step="1" class="tab">
  <div class="form-group form-group-outer">
    <h3>Question 1</h3>
    <div class="form-group">
      <label class="container_radio">Answer 1 <input type="radio" name="q1[]" value="1" class="required"> <span class="checkmark"></span></label>
    </div>
    <div class="form-group">
      <label class="container_radio">Answer 2 <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">Answer 3 <input type="radio" name="q1[]" value="3" class="required"> <span class="checkmark"></span></label>
      <div class="row sub-question is-hidden">
        <h3 class="col-12">Specify answer for Answer 3</h3>
        <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 class="form-group col-12">
          <label class="container_radio">Green <input type="radio" name="q1_1[]" value="2" class="required"> <span class="checkmark"></span></label>
        </div>
        <div class="form-group col-12">
          <label class="container_radio">Red <input type="radio" name="q1_1[]" value="3" class="required"> <span class="checkmark"></span></label>
        </div>
      </div>
    </div>
  </div>

  <div class="form-group form-group-outer">
    <h3>Question 2</h3>
    <div class="form-group">
      <label class="container_checkbox">Answer 1 <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">Answer 2 <input type="checkbox" name="q2[]" value="2" class="required"> <span class="checkmark"></span> </label>
      <div class="row sub-question is-hidden">
        <h3 class="col-12">Specify answer for Answer 3</h3>
        <div class="form-group col-12">
          <label class="container_checkbox">Small <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">Medium <input type="checkbox" name="q2_1[]" value="2" class="required"> <span class="checkmark"></span> </label>
        </div>
        <div class="form-group col-12">
          <label class="container_checkbox">Big <input type="checkbox" name="q2_1[]" value="3" class="required"> <span class="checkmark"></span></label>
        </div>
      </div>
    </div>
  </div>

  <div class="form-group form-group-outer">
    <h3>Question 3</h3>
    <div class="form-group">
      <label class="container_radio">Answer 1 <input type="radio" name="q3[]" value="1" class="required"> <span class="checkmark"></span></label>
    </div>
    <div class="form-group">
      <label class="container_radio">Answer 2 <input type="radio" name="q3[]" value="2" class="required"> <span class="checkmark"></span></label>
    </div>
    <div class="form-group form-group-outer">
      <label class="container_radio">Answer 3 <input type="radio" name="q3[]" value="3" class="required"> <span class="checkmark"></span> </label>
      <div class="row sub-question is-hidden">
        <h3 class="col-12">Specify answer for Answer 3</h3>
        <div class="form-group col-12">
          <label class="container_checkbox">Yes <input type="checkbox" name="q3_1[]" value="1" class="required"> <span class="checkmark"></span></label>
        </div>
        <div class="form-group col-12">
          <label class="container_checkbox">No <input type="checkbox" name="q3_1[]" value="2" class="required"> <span class="checkmark"></span></label>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 2

Попробуйте сгруппировать каждый вопрос внутри group-container и на каждом радио или флажке, отмеченном сначала, скрыть все подвопросы только внутри этого группового контейнера. Просто измените селектор кликов на этот .form-group> label вместо этого .form-group-outer> label , см. Пример ниже.

<html>

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classes</title>

    <link rel="icon" href="classroom.png">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .sub-question {
            display: none;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('.form-group > label').find('> input:checkbox, > input:radio').on('change', function () {
            if (!$(this).closest('.row').hasClass('sub-question')) {
                el = $(this).closest('.form-group').find('.sub-question');
                if ( $(this).attr('type') == 'radio') {
                 $(this).closest('.group-container').find('.sub-question').hide();
                }
                if (el.length > 0 && $(this).is(':checked')) { el.css('display', 'block'); }
                else {
                    $(this).closest('.form-group').find('.sub-question').css('display', 'none');
                    $(this).closest('.form-group').find('.sub-question :input[type="radio"], .sub-question :input[type="checkbox"]').each(function (index) {
                        $(this).prop('checked', false);
                    });
                }
             }
            });

            
        });
    </script>
</head>

<body>
    <div data-step="1" class="tab">
     <div class="group-container">
        <h3>Question 1</h3>
        <div class="form-group"> <label class="container_radio">Answer 1 <input type="radio" name="q1[]" value="1"
                    class="required"> <span class="checkmark"></span> </label> </div>
        <div class="form-group"> <label class="container_radio">Answer 2 <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">Answer 3 <input type="radio"
                    name="q1[]" value="3" class="required"> <span class="checkmark"></span> </label>
            <div class="row sub-question">
                <h3 class="col-12">Specify answer for Answer 3</h3>
                <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 class="form-group col-12"> <label class="container_radio">Green <input type="radio" name="q1_1[]"
                            value="2" class="required"> <span class="checkmark"></span> </label> </div>
                <div class="form-group col-12"> <label class="container_radio">Red <input type="radio" name="q1_1[]"
                            value="3" class="required"> <span class="checkmark"></span> </label> </div>
            </div>
        </div>
    </div>
        <hr>
    <div class="group-container">
        <h3>Question 2</h3>
        <div class="form-group"> <label class="container_checkbox">Answer 1 <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">Answer 2 <input type="checkbox"
                    name="q2[]" value="2" class="required"> <span class="checkmark"></span> </label>
            <div class="row sub-question">
                <h3 class="col-12">Specify answer for Answer 3</h3>
                <div class="form-group col-12"> <label class="container_checkbox">Small <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">Medium <input type="checkbox"
                            name="q2_1[]" value="2" class="required"> <span class="checkmark"></span> </label> </div>
                <div class="form-group col-12"> <label class="container_checkbox">Big <input type="checkbox"
                            name="q2_1[]" value="3" class="required"> <span class="checkmark"></span> </label> </div>
            </div>
        </div>
    </div>
        <hr>
 <div class="group-container">
        <h3>Question 3</h3>
        <div class="form-group"> <label class="container_radio">Answer 1 <input type="radio" name="q3[]" value="1"
                    class="required"> <span class="checkmark"></span> </label> </div>
        <div class="form-group"> <label class="container_radio">Answer 2 <input type="radio" name="q3[]" value="2"
                    class="required"> <span class="checkmark"></span> </label> </div>
        <div class="form-group form-group-outer"> <label class="container_radio">Answer 3 <input type="radio"
                    name="q3[]" value="3" class="required"> <span class="checkmark"></span> </label>
            <div class="row sub-question">
                <h3 class="col-12">Specify answer for Answer 3</h3>
                <div class="form-group col-12"> <label class="container_checkbox">Yes <input type="checkbox"
                            name="q3_1[]" value="1" class="required"> <span class="checkmark"></span> </label> </div>
                <div class="form-group col-12"> <label class="container_checkbox">No <input type="checkbox"
                            name="q3_1[]" value="2" class="required"> <span class="checkmark"></span> </label> </div>
            </div>
        </div>
 </div>
    </div>
</body>

</html>