单击菜单时更改btn颜色复选框选项

Question

我尝试在用户单击菜单列表中的某个选项时更改颜色按钮。这可能吗？ 对于btn_clear，我希望背景颜色在点击菜单选项之一时自动立即变为蓝色，并且对于btn_apply，颜色变为红色。 因此，例如，对于“产品”类别，用户单击“Alpha”，然后按钮颜色更改立即自动生效。

请参阅我的FIDDLE ... FIDDLE （SA代码段似乎不想工作...对不起）。

$(".btn_clear").on('click', function (e) { 
 
    e.stopPropagation(); 
 
    $(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false); 
 
}); 
 

 
$('.dropdown-menu').click(function(e) { 
 
    e.stopPropagation(); 
 
}); 
 

 
$("checkbox").on("click", function(e) { 
 
    e.preventDefault(); 
 
    
 
    var i = $("li").index($(this).parent()); 
 
    
 
    if (i === 1) { 
 
    $('btn_clear').css('background', 'blue'); 
 
    } else if (i === 2) { 
 
    $('btn_apply').css('background', 'red'); 
 
    } 
 
    
 
});

.scrollable-menu { 
 
    height: auto; 
 
    max-height: 200px; 
 
    overflow-x: hidden; 
 
} 
 

 
.checkbox :hover { 
 
     background-color:red; 
 
     cursor:pointer; 
 
    } 
 

 
.div_form :hover { 
 
     background-color:green; 
 
     cursor:pointer; 
 
    } 
 

 
.btn_clear { 
 
    float: right; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 29px; 
 
\t text-align: center; 
 
    background-color:grey 
 
    } 
 
    
 
.btn_apply { 
 
    float: left; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 17px; 
 
\t text-align: center; 
 
    background-color:yellow 
 
    } 
 

 

 
.checkbox label, .radio label { 
 
    min-height: 20px; 
 
    padding-left: 30px; 
 
\t padding-right:30px; 
 
    margin-bottom: 0; 
 
    font-weight: 400; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
.div_form { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t bottom: -70px 
 
} 
 

 
.btn { 
 
\t border-radius:0; 
 
\t margin-top:5px 
 
} 
 

 
.dropdown-menu { 
 
\t border-radius:0; 
 
\t border:5px solid blue 
 
} 
 

 
.typeahead { 
 
\t width:90%; 
 
\t margin-left:10px 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/umd/dropdown.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 
 
<div class="btn-toolbar"> 
 
     <!--Default buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-primary" type="button">Products</button> 
 
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
 
      <div class="dropdown-menu" style="margin-left: 2em"> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <input class="countries" placeholder="Countries" type="text"> <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Alpha</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Beta 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Gamma</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Delta</label> 
 
       </div> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Omega</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Koppa 
 
        </label> 
 
       </div> 
 
         <div class="div_form"> 
 
          <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div><!--Success buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-primary" type="button">Availability</button> 
 
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
 
      <div class="dropdown-menu" style="margin-left: 2em"> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> One</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Two 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Nine</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Eight</label> 
 
       </div> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Seven</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Fifteen 
 
        </label> 
 
       </div> 
 
         <div class="div_form"> 
 
          <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div><!--Warning buttons with dropdown menu--> 
 
    </div>

Answer 1

是，能够http://www.bootply.com/rb3Uyw68Zg

但你的代码有几个问题，我添加了一些“console.log”，看看发生了什么

首先你错过了一个“。”在你的选择，改变

if (i === 1) { 
    $('btn_clear').css('background', 'blue'); 
} else if (i === 2) { 
    $('btn_apply').css('background', 'red'); 
} 

到

if (i === 1) { 
    $('.btn_clear').css('background', 'blue'); 
} else if (i === 2) { 
    $('.btn_apply').css('background', 'red'); 
} 

也

var i = $("li").index($(this).parent()); 

总是导致-1，所以你永远不会进入这些如果，你就必须解决这个问题为你的背景颜色变化进行调用。

这是我的更改后的代码http://www.bootply.com/rb3Uyw68Zg

编辑

限制每个菜单的点击操作，您可以使用descendant selector，所以你应该改变：

$(".checkbox").on("click", function(e) { 

到

$(".products .checkbox").on("click", function(e) { 

这意味着，你将只处理点击到的“产品”的孩子复选框（你也有产品类添加到您的下拉列表）

这里有一个更新的例子：http://www.bootply.com/QoIe6kIt2e

Answer 2

当选择一个选项时，此将改变这两个按钮中的颜色：

$(".checkbox").on("click", function(e) { 
    $('.btn_clear').css('background-color', 'blue'); 
    $('.btn_apply').css('background-color', 'red'); 
}); 

段：http://www.bootply.com/0CQWCAtU2s