Change Button color to green when checkbox is checked

Question

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

Button to select menu:

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

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

the id to my checkbox is dynamic and it keep getting change

[Take a look at this question](http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript). There s a very good answer how to add and remove classes. — Rick Bronger, Dec 21 '16 at 12:28
So where is the javascript you have tried? Please update your question and include the relevant source code. — NewToJS, Dec 21 '16 at 12:30
loadMenu() calls a webService and gets all the Menu from DB @OwaisAslam — Sidharth, Dec 21 '16 at 12:41
I have deleted the JS and it was not working or doing anything then crashing the page. @WilliMentzel — Sidharth, Dec 21 '16 at 12:42
I have deleted the JS and it was not working or doing anything then crashing the page @NewToJS — Sidharth, Dec 21 '16 at 12:42

ab29007 · Accepted Answer · 2016-12-22T04:33:55.303

3

Try this:

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

edited Dec 22 '16 at 04:33

answered Dec 21 '16 at 12:39

ab29007

7,611
2
17
43

1

the id to my checkbox is dynamic and it keep getting change as there are 100 items in menu – Sidharth Dec 21 '16 at 12:44
so you want it to attach to all 100 items? – ab29007 Dec 21 '16 at 12:45
you can do that by class or give it a pattern. – ab29007 Dec 21 '16 at 12:46
also how many of these checkboxes are present in the page at a given time. all of them or only one? – ab29007 Dec 21 '16 at 12:48
there are more than 100 checkboxes. even if 1 is checked select menu button must be green @Anuja Agarwal – Sidharth Dec 21 '16 at 12:56
oh, ok. I'll update the code can you please give me some time – ab29007 Dec 21 '16 at 12:57
ok. I updated the code . take a look at it. does it fit your reuirement? – ab29007 Dec 21 '16 at 13:10
it works only on the first checkbox, if i select second or any other then first, it wont work. – Sidharth Dec 22 '16 at 04:03
oh,sorry I didn't check that. give me 10. – ab29007 Dec 22 '16 at 04:31
ok now it works for all. changes made :: Added an `id="formID"` to your form and chaged the script\ – ab29007 Dec 22 '16 at 04:34
Thank-you very much, i have been stuck at this for so much time – Sidharth Dec 22 '16 at 05:03

score 1 · Answer 2 · answered Dec 21 '16 at 12:36

Working fiddle.

You'v ejust to listen on checkbox click the add class green that will change the color of the button :

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

Hope this helps.

$('#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>

The problem is my ID is Changing on every checkbox, as i am iterating the products. — Sidharth, Dec 21 '16 at 12:53

score 0 · Answer 3 · answered Dec 21 '16 at 12:35

What you can do is add css to the button and switch the css with javascript.

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');
}

Should be something like this. can't test it 100% at the moment.

Change Button color to green when checkbox is checked

3 Answers3

Linked

Related