OnClick, display a div with checkbox with jQuery

Question

I've this 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>

When I click on the third checkbox, it display a sub level of checkbox.

Problem is when I uncheck the 3rd checkbox, the sub level are not hide.

What's my problem please.

Here's the jsFiddle if needed: https://jsfiddle.net/a8rwqe9k/

Thanks.

Mech · Accepted Answer · 2020-06-21 14:48:28Z

1

I think you were over complicating it with the .css(). There are show() and hide() functions with jQuery that I've utilized in my answer. If you have any questions, feel free to follow up.

EDIT: The original question grew from the comments. Edits reflect desired changes.

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

edited Jun 21, 2020 at 14:48

answered Jun 21, 2020 at 3:05

Mech

4,0352 gold badges17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

daremachine Over a year ago

Note...this does not work as expected because this is not clear checkboxes on close as OP has.

daremachine Over a year ago

Ah sorry. Your code missing part if I uncheck third checkbox and check it again the sub-levels are populated from previous entry.

Mech Over a year ago

I also edited to include @daremachine's (excellent) point by including $('input[name="q1_1[]"]').prop('checked', false); which will clear the input box when the parent is deselected.

popol Over a year ago

In your jsFiddle jsfiddle.net/un58pwe1, I think it's doesn't work at all. :)

Mech Over a year ago

There is some more things I need to look into. it's late so i will look after it tomorrow

daremachine · Accepted Answer · 2020-06-21 02:59:20Z

0

The problem is you need to know if the sub-levels are hiddens or not.

Your condition should look like

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

also I suggest you change .css('display' for jQuery .show() and .hide() methods.

Don't use .css for display show/hide like that.

answered Jun 21, 2020 at 2:59

daremachine

2,7982 gold badges27 silver badges36 bronze badges

2 Comments

popol Over a year ago

Thanks for your help. I think it doesn't work: jsfiddle.net/3y2p7gbz

daremachine Over a year ago

@popol what not work? On third checkbox show/hide sub-levels working. What I missing?

Collectives™ on Stack Overflow

OnClick, display a div with checkbox with jQuery

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related