DIvs中的复选框分组

Question

我想将复选框分组在下面的2个div中，这样当用户检查复选框时，该复选框中的其他复选框将被取消选中。

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

我想使用下面的JQuery片段，但它不工作。

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

以下是带有复选框组的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

复选框不是彼此的兄弟姐妹，他们的父母divs是。您需要遍历选中的复选框父母，然后它的兄弟姐妹和发现复选框在它：

$('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); 
});