Question

这是我的JSFiddle： JSFiddle Link

在这里，我想仅选择1个主选项。即

如果没有子部分，我只能选择一个主要选项，例如 Bond 或 Market 。如果一个主选项被选中，则其他主或子选项将被取消。
如果有子部分，我可以从同一主选项中选择一个或多个子选项，但不能从其他主选项中选择一个或多个子选项。与以前一样，其他主选项和其他主选项中的子选项将被取消选中。例如，如果我选择商品，我也可以选择自然，因为这两个商品都在商品下。但是，如果我单击另一个 sub选项（例如 Celeb ）或主要选项（例如 Market ），该选项不在商品，那么商品和天然都不会选中。

我的 HTML：

<div class="topic-search">
<ul class=" topic-dropdown-menu">
   <li class="topic-search-mainmenu" id="" data-topic="Bond">
      <input type='checkbox' name='topics[]' class='ticker-menu' id="BOND" value=''>Bond
   </li>

   <li class="topic-search-dropdown-submenu">
      <p class="topic-open">Commodities <i class="fa fa-angle-down"></i></p>
      <ul class="topic-search-submenu">
         <li class="topic-search-submenu-mainmenu" data-topic="Commodities">
            <input type='checkbox' name='topics[]' class='ticker-menu' id="CMMD" value=''>Commodity
         </li>
         <li class="topic-search-submenu-mainmenu" data-topic="Commodities">
            <input type='checkbox' name='topics[]' class='ticker-menu' id="NTRL" value=''>Natural
         </li>
      </ul>
   </li>

   <li class="topic-search-mainmenu" data-topic="Market" >
      <input type='checkbox' name='topics[]' class='ticker-menu' id="MRKT" value=''>Market
   </li>

   <li class="topic-search-dropdown-submenu">
      <p class="topic-open">Entertainment <i class="fa fa-angle-down"></i></p>
      <ul class="topic-search-submenu">
         <li class="topic-search-submenu-mainmenu" data-topic="Gas">
            <input type='checkbox' name='topics[]' class='ticker-menu' id="CMD" value=''>Celeb
         </li>
         <li class="topic-search-submenu-mainmenu" data-topic="Gas">
            <input type='checkbox' name='topics[]' class='ticker-menu' id="GAS" value=''>Public Gossip
         </li>
      </ul>
   </li>


</ul>
</div>

我的 jQuery

var ticker_menu = $("input.ticker-menu");
var parent_data_topic_name = "";

ticker_menu.on('click', function() {
   // $(this).prop('checked', true);
   if(parent_data_topic_name ==""){
        parent_data_topic_name = $(this).parent().attr('data-topic');
      ticker_menu.not(this).prop('checked', false);  
   }
   else{
       parent_data_topic_name = $(this).parent().attr('data-topic');

     ticker_menu.each(function( e ) {

        if(ticker_menu.not(this).is(':checked') && ticker_menu.parent().attr('data-topic') == parent_data_topic_name){

        var id_name = ticker_menu.not(this).attr('id');

        $(""+id_name).prop('checked', true); 
     }else{

        var id_nam = ticker_menu.not(this).attr('id');

       $(""+id_name).prop('checked', false);
     }   

     });


   }


});

我该如何实现？

Answer 1

我在这里希望你在寻找什么。

我强烈建议您看看each()和.not()，它们与css选择器不同：不是

/*3*/

这是您更新的 JsFiddle

jQuery使用复选框从同一主选项中选择一个主选项或多个子选项

1 个答案: