选中复选框时将按钮颜色更改为绿色

Question

当我单击复选框时，我想更改按钮选择菜单的颜色。

选择菜单的按钮：

<button id="bttn" onclick="loadMenu()" data-toggle="modal" href="#myModalMenu"
    class="btn btn-circle red-intense">Select Menu</button>

模态：

<div class="modal fade rotate" id="myModalMenu">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×</button>
                <h6 class="modal-title"></h6>
            </div>

            <div class="modal-body">
                <div class="portlet box orange-meadow">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i>MENU
                        </div>
                    </div>
                </div>
                <div class="container"></div>
                <div id="menuView">
<ul>
                    <li class="product-list-menu"><INPUT TYPE="CHECKBOX" id="checkbox_product" NAME="product" VALUE="product" onclick="manageMenuSelection(${product})"> product.name </li>
<ul>                
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-circle red-intense">Ok</button>
                    <a href="#" data-dismiss="modal" class="btn">Skip</a>
                </div>
            </div>
        </div>
    </div>
</div>

需要使用JavaScript来更改按钮的颜色，尝试了许多选项和功能，但没有任何效果。

我复选框的ID是动态的，并且不断变化

Answer 1

尝试这个：

 $("input[class='myCheckbox']").click(function(){ if($("#formID input:checkbox:checked").length > 0){ $(".checkSubmit").addClass('active'); } else{ $(".checkSubmit").removeClass('active'); } }); 

 .checkSubmit{ background-color:red; } .checkSubmit.active{ background-color:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="formID" action="demo_form.asp" method="get"> <input class="myCheckbox" type="checkbox" name="vehicle" value="Bike"/> I have a bike 1<br> <input class="myCheckbox" type="checkbox" name="vehicle" value="Bike"/> I have a bike 2<br> <input class="myCheckbox" type="checkbox" name="vehicle" value="Bike"/> I have a bike 3<br> <input class="myCheckbox" type="checkbox" name="vehicle" value="Bike"/> I have a bike 4<br> <input class="checkSubmit" type="submit" value="Submit"> </form> 

Answer 2

工作提琴 。

您只需要在checkbox单击，单击添加类green更改按钮颜色：

$('#checkbox_product').on('click',function(){
  $('#bttn').toggleClass('green');
})

希望这可以帮助。

 $('#checkbox_product').on('click', function(){ $('#bttn').toggleClass('green'); }); 

 .green{ background-color:rgba(0, 128, 0, 0.39); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <button id="bttn" data-toggle="modal" href="#myModalMenu" class="btn btn-circle red-intense">Select Menu</button> <div class="modal fade rotate" id="myModalMenu"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h6 class="modal-title"></h6> </div> <div class="modal-body"> <div class="portlet box orange-meadow"> <div class="portlet-title"> <div class="caption"> <i class="fa fa-gift"></i>MENU </div> </div> </div> <div class="container"></div> <div id="menuView"> <ul> <li class="product-list-menu"> <INPUT TYPE="CHECKBOX" id="checkbox_product" NAME="product" VALUE="product" onclick="manageMenuSelection(${product})"/> product.name </li> </ul> </div> <div class="modal-footer"> <button data-dismiss="modal" class="btn btn-circle red-intense">Ok</button> <a href="#" data-dismiss="modal" class="btn">Skip</a> </div> </div> </div> </div> </div> 

Answer 3

您可以做的是将CSS添加到按钮中，并使用javascript切换CSS。

的CSS

.buttoncolorred{
 background-color: red;
} 

.buttoncolorgreen{ 
background-color: green; 
}

javascript

 if(document.getElementById('#checkbox_product').checked) {
    $("#ButtonID").removeClass('buttoncolorred').addClass('buttoncolorgreen');
} else {
    $("#ButtonID").removeClass('buttoncolorgreen').addClass('buttoncolorred');
}

应该是这样的。 目前无法100％测试。