Change display on click on a radio button with jQuery

user_9933285 0
Viewed 133

I have few radio buttons and the last one control the display of another set of radio buttons.

If the user clicks on the last one (the one with the sub-level .sub-question), I want to display the sub-level radio buttons.

My problem: actually if the user clicks on a sub-level radio button, it hides the .sub-question part.

What I used:

$('.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 is the following:

...
<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 is in this jsFiddle: https://jsfiddle.net/fkL4dnj1/

But it doesn't work.

Could you please help me with this ?

Thanks.

jquery
2 Answers

Here is a working version. You can differentiate outer form input elements by addind some class tags.

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

user_105620340

The problem is that your secondary radio buttons have a 'form-group' parent, so they are handled as primary radio buttons.

You could specify an additional class for the first three radio buttons and update your click handler:

<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() {
   /// ...
});

Here is the updated fiddle: https://jsfiddle.net/op6fy842/

user_10143780
Related