通过在jQuery中选中复选框和收音机来控制div显示

提问者：小点点

通过在jQuery中选中复选框和收音机来控制div显示

我有几个包含单选按钮或复选框的HTML块。

对于某些答案，它显示另一组单选按钮或复选框。

问题是，在选中第三个选项后，如果用户将其选择更改为另一个选项，则不会隐藏子级别选项。

jsFiddler在这里:https://jsfiddle.net/j8n4rhug/

null

$('.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>

null

共2个答案

匿名用户

用display:none；创建CSS类is-hidded，并将其分配给每个子问题
on“change”-迭代每个组的checkable以便检索其子问题
在子问题元素上使用.toggleClass（“is-Hidden”，this.value)

null

$('.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>

匿名用户

尝试将每个问题分组到组容器中，并在每个单选或复选框中先选中，只隐藏该组容器中的所有子问题。只需将单击选择器更改为此。form-group>； label而不是this.form-group-outer>；标签，请参考下面的示例。

null

<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>

通过在jQuery中选中复选框和收音机来控制div显示

共2个答案

相关问题

热门标签

通过在jQuery中选中复选框和收音机来控制div显示

共2个答案

相关问题

热门标签

微信关注