CODEWITHSUNDEEP
javascriptjqueryhtml
nmvictor
nmvictor

Reputation: 1129

Checkbox Grouping in DIvs

I want to group the checkbox in the following 2 divs, so that when a user checks on of the checkbox, the other checkboxes in that div are uncheck.

How can i do this using JQuery?

I am trying to use the following JQuery snippet but its not working.

$('input[type="checkbox"]').on('change', function() {
        $(this).siblings('input[type="checkbox"]').prop('checked', false);
    });

The following is the HTML with the groups of Checkboxes.

             <!--- Group 1 -->
             <div id="banner_main" class="row">
                <div class="question">
                    BANNER MAIN
                </div>
                <div class="switch">
                    <input id="cmn-toggle-banner_main-admob" class="cmn-toggle cmn-toggle-yes-no" checked type="checkbox">
                    <label for="cmn-toggle-banner_main-admob" data-on="ADMOB" data-off="ADMOB"></label>
                </div>
                <div class="switch">
                    <input id="cmn-toggle-banner_main-fb" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-banner_main-fb" data-on="FB" data-off="FB"></label>
                </div>
                <div class="switch">
                    <input id="cmn-toggle-banner_main-mc" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-banner_main-mc" data-on="MC" data-off="MC"></label>
                </div>
                <div class="switch">
                    <input id="cmn-toggle-banner_main-appnext" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-banner_main-appnext" data-on="APPNEXT" data-off="APPNEXT"></label>
                </div>
            </div>

            <!--- Group 2 -->
            <div id="banner_wp" class="row">
                <div class="question">
                    BANNER WALLPAPER
                </div>
                <div class="switch">
                    <input id="cmn-toggle-banner_wp-admob" class="cmn-toggle cmn-toggle-yes-no" checked type="checkbox">
                    <label for="cmn-toggle-banner_wp-admob" data-on="ADMOB" data-off="ADMOB"></label>
                </div>
                <div class="switch">
                    <input id="cmn-toggle-banner_wp-fb" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-banner_wp-fb" data-on="FB" data-off="FB"></label>
                </div>
                <div class="switch">
                    <input id="cmn-toggle-banner_wp-mc" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-banner_wp-mc" data-on="MC" data-off="MC"></label>
                </div>
                <div class="switch">
                    <input id="cmn-toggle-banner_wp-appnext" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-banner_wp-appnext" data-on="APPNEXT" data-off="APPNEXT"></label>
                </div>
            </div>

Upvotes: 0

Views: 67

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82241

Checkboxes are not siblings of each other,their parent divs are. You need to traverse to checked checkbox parent, then to its siblings and find checkboxes in it:

$('input[type="checkbox"]').on('change', function() {
    $(this).parent().siblings().find('input[type="checkbox"]').prop('checked', false);
});

You can also use:

$('input[type="checkbox"]').on('change', function() {
  $(this).closest('.row').find(':checkbox').not(this).prop('checked', false);
});

Upvotes: 3

Related Questions