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

时间:2018-09-30 20:53:58

标签: javascript jquery

这是我的JSFiddle: JSFiddle Link

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

  1. 如果没有子部分,我只能选择一个主要选项,例如 Bond Market 。如果一个主选项被选中,则其他主或子选项将被取消。
  2. 如果有子部分,我可以从同一主选项中选择一个或多个子选项,但不能从其他主选项中选择一个或多个子选项。与以前一样,其他主选项和其他主选项中的子选项将被取消选中。 例如,如果我选择商品,我也可以选择自然,因为这两个商品都在商品下。但是,如果我单击另一个 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);
     }   

     });


   }


});

我该如何实现?

1 个答案:

答案 0 :(得分:1)

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

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

/*3*/

这是您更新的 JsFiddle