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

<强> Working fiddle

您只需要checkbox点击添加课程green，即可更改按钮的颜色：

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

希望这会有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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％测试它。

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

3 个答案: