Question

我想将以下2个div中的复选框分组，以便当用户选中该复选框时，该div中的其他复选框将取消选中。

我如何使用JQuery做到这一点？

我正在尝试使用以下JQuery代码段，但它无效。

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

以下是包含Checkboxes组的HTML。

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

Answer 1

复选框不是彼此的兄弟姐妹，他们的父div是。您需要遍历选中复选框parent，然后遍历其兄弟姐妹并在其中找到复选框：

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

您也可以使用：

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

DIv中的复选框分组

1 个答案: