选中复选框时将按钮颜色更改为绿色 [英] Change Button color to green when checkbox is checked

问题描述

当我单击复选框上的(选中)时，我想更改按钮选择菜单的颜色.

I want to change the color of button select menu when i click(check) on the checkbox.

按钮以选择菜单:

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

MODAL:

<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来更改按钮的颜色，尝试了许多选项和操作，但没有任何效果.

need a javascript to change the color of button, tried many options and things, but nothing is working.

我复选框的ID是动态的，并且会不断更改

推荐答案

尝试一下:

$("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>

这篇关于选中复选框时将按钮颜色更改为绿色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！