CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
prbnk
prbnk

Reputation: 59

Change color of a Radio button permanently on click

Hi I designed a serious of Radio buttons. I want to change the color of radio buttons permanently on click. Please help me to implement this design. I have written this code here, Which is not working. Any suggestions would be highly appreciated.

$('.btn.btn-default').on("click", function() {
  //$('button').not(this).removeClass();
  $(this).toggleClass('active');

});
.active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default">
        <input type="radio" name="options" id="option1" autocomplete="off" checked>
      </label>
      <label class="btn btn-default">
    	<input type="radio" name="options" id="option2" autocomplete="off">
      </label>
      <label class="btn btn-default">
    	<input type="radio" name="options" id="option3" autocomplete="off">
      </label>
      <label class="btn btn-default">
        <input type="radio" name="options" id="option4" autocomplete="off">
      </label>
    </div>
  </div>
</div>

Upvotes: 0

Views: 78

Answers (5)

prbnk
prbnk

Reputation: 59

In my case, the below solution worked the best. Thanks all for your valuable inputs.

 <style>
     .btn-default.active{background-color:blue;}
  </style>

  <script>
     $('.btn.btn-default').on("click",function(){  
       //$('button').not(this).removeClass();
       $(this).addClass('active');

     });
  </script>

I added .btn-default CSS class to the style.

Upvotes: 0

Jasbir
Jasbir

Reputation: 376

Try this code, Its working

$('.btn.btn-default').on("click", function() {
  //$('button').not(this).removeClass();
  $(this).addClass('active');

});
.active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default">
        <input type="radio" name="options" id="option1" autocomplete="off" checked>
      </label>
      <label class="btn btn-default">
    	<input type="radio" name="options" id="option2" autocomplete="off">
      </label>
      <label class="btn btn-default">
    	<input type="radio" name="options" id="option3" autocomplete="off">
      </label>
      <label class="btn btn-default">
        <input type="radio" name="options" id="option4" autocomplete="off">
      </label>
    </div>
  </div>
</div>

Upvotes: 1

4b0
4b0

Reputation: 22323

You can use add and remove class with siblings like this.

$('.btn.btn-default').on("click", function() {
  $(this).addClass('active');
  $(this).siblings().removeClass('active')

});
.active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default">
    									<input type="radio" name="options" id="option1" autocomplete="off" checked>
    								</label>
      <label class="btn btn-default">
    									<input type="radio" name="options" id="option2" autocomplete="off">
    								</label>
      <label class="btn btn-default">
    									<input type="radio" name="options" id="option3" autocomplete="off">
    								</label>
      <label class="btn btn-default">
    									<input type="radio" name="options" id="option4" autocomplete="off">
    								</label>
    </div>
  </div>
</div>

Upvotes: 2

Manishh
Manishh

Reputation: 1484

I think you only need to change the toggleClass with addClass as you need to change color permanently. 

$('.btn.btn-default').on("click", function() {
  $(this).addClass('active');
});

Upvotes: 1

nitishk72
nitishk72

Reputation: 1746

You just need to add JQuery after loading the whole body.

I think this will help you. 

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   </head>
   <body>
      <style>
         .active{background-color:red;}
      </style>
      <div class="container">
         <div class="row">
            <div class="btn-group btn-group-justified" data-toggle="buttons">
               <label class="btn btn-default">
               <input type="radio" name="options" id="option1" autocomplete="off" checked>
               </label>
               <label class="btn btn-default">
               <input type="radio" name="options" id="option2" autocomplete="off">
               </label>
               <label class="btn btn-default">
               <input type="radio" name="options" id="option3" autocomplete="off">
               </label>
               <label class="btn btn-default">
               <input type="radio" name="options" id="option4" autocomplete="off">
               </label>
            </div>
         </div>
      </div>
      <script>
         $('.btn.btn-default').on("click",function(){  
           //$('button').not(this).removeClass();
           $(this).toggleClass('active');
         
         });
      </script>
   </body>
</html>

Upvotes: -1

Related Questions