Geek Answers Handbook

Change boot radio

I'm sure that what I'm trying to do is pretty simple, but I need help.

I have three switches:

  • active
  • inactive
  • not found

I'd love to change the class (Bootstrap v3) of the buttons when clicked. All of them have a default class of btn-default . However, on click, I would like to have the following classes:

  • active ( btn-success )
  • inactive ( btn-warning )
  • not found ( btn-danger )

Only one should be selected at any given time, and only one should be painted at any given time.

My code is still below, I think I'm almost there. If someone can offer some advice that will be great.

Here is the link to my jsfiddle .

 $(document).ready(function() { $('#option1').change(function() { $(this).removeClass("btn-default").addClass("btn-success"); }); $('#option2').change(function() { $(this).removeClass("btn-default").addClass("btn-warning"); }); $('#option3').change(function() { $(this).removeClass("btn-default").addClass("btn-danger"); }); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active </label> <label class="btn btn-default"> <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive </label> <label class="btn btn-default"> <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found </label> </div>
+7
javascript jquery html css twitter-bootstrap
source share
7 answers

Now you can have a click event on btn-default and have only one handler:

Jsfiddle

 $(".btn-default").on("click", function() { var classArr = ["btn-success", "btn-warning", "btn-danger"]; $(".btn-default").removeClass(classArr.toString().replace(/,/g," ")); var value = $(this).find("input[name='options']").val(); $(this).addClass(classArr[value - 1]); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active </label> <label class="btn btn-default"> <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive </label> <label class="btn btn-default"> <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found </label> </div>
+6
source share

First of all, you should include bootstrap.js after jquery.js
Secondly, your selector selects a child, but you need to change the parent class. So you need to use parent() here

The following is a snippet of code:

 $(document).ready(function() { $('[id^="option"]').change(function() { $('.btn-group > label').removeClass().addClass('btn btn-default'); }); $('#option1').change(function(){ $(this).parent().removeClass('btn-default').addClass("btn-success"); }); $('#option2').change(function(){ $(this).parent().removeClass('btn-default').addClass("btn-warning"); }); $('#option3').change(function(){ $(this).parent().removeClass('btn-default').addClass("btn-danger"); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active </label> <label class="btn btn-default"> <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive </label> <label class="btn btn-default"> <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found </label> </div>
+3
source share

The code you have does not change classes because you are targeting the wrong elements. However, the other answers did not take into account that you want only one color to be painted at any given time. Just add the delete classes and add the default classes to the changes of each of them. Try the following:

 $(document).ready(function() { $('#option1').change(function() { $(this).parent().removeClass("btn-default").addClass("btn-success"); $('#option2').parent().removeClass("btn-warning").addClass("btn-default"); $('#option3').parent().removeClass("btn-danger").addClass("btn-default"); }); $('#option2').change(function() { $(this).parent().removeClass("btn-default").addClass("btn-warning"); $('#option1').parent().removeClass("btn-success").addClass("btn-default"); $('#option3').parent().removeClass("btn-danger").addClass("btn-default"); }); $('#option3').change(function() { $(this).parent().removeClass("btn-default").addClass("btn-danger"); $('#option1').parent().removeClass("btn-success").addClass("btn-default"); $('#option2').parent().removeClass("btn-warning").addClass("btn-default"); }); });
+3
source share
 $(document).ready(function() { $('#option1 ,#option2, #option3').change(function() { $('#option1').parent().removeClass('btn-success').addClass("btn-default") $('#option2').parent().removeClass('btn-warning').addClass("btn-default") $('#option3').parent().removeClass(' btn-danger').addClass("btn-default"); if($(this).attr('id') == 'option1') $(this).parent().removeClass("btn-default").addClass("btn-success"); else if($(this).attr('id') == 'option2') $(this).parent().removeClass("btn-default").addClass("btn-warning"); else $(this).parent().removeClass("btn-default").addClass("btn-danger"); }); });

Remove all applicable classes as soon as this is done, find out which button was clicked, and apply these CSS options. As for why CSS doesn't change, you didn't target the labels where the btn- "insert bootstrap button" button was applied here by calling parent (), you go up to the level that CSS controlled.

Also, generalize the deletion:

 $(document).ready(function() { $('#option1 ,#option2, #option3').change(function() { removeAll() }); $('#option1').change(function() { $(this).parent().removeClass("btn-default").addClass("btn-success"); }); $('#option2').change(function() { $(this).parent().removeClass("btn-default").addClass("btn-warning"); }); $('#option3').change(function() { $(this).parent().removeClass("btn-default").addClass("btn-danger"); }); }); function removeAll() { $('#option1').parent().removeClass('btn-success').addClass("btn-default"); $('#option2').parent().removeClass('btn-warning').addClass("btn-default"); $('#option3').parent().removeClass(' btn-danger').addClass("btn-default"); };
+3
source share

You can use a Custom Data Attribute like this

 $('.btn').click(function() { var btn = $(this).data('btn'); $(this).addClass(btn).removeClass('btn-default'); $(this).siblings().each(function() { $(this).removeClass($(this).data('btn')).addClass('btn-default'); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default" data-btn="btn-success"> <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active </label> <label class="btn btn-default" data-btn="btn-warning"> <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive </label> <label class="btn btn-default" data-btn="btn-danger"> <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found </label> </div>
+3
source share

The problem is that you are binding the change event handler to input , but <label> are those written with btn-default .

Change the links to $(this) to $(this).parent() and it will work as intended.

+1
source share

Secondly, your selector selects a child, but you need to change the parent class. So you need to use parent () here

To activate only one, you must remove the class from another button. this is code

 $('.btn').removeClass().addClass('btn').addClass('btn-default'); 

 $(document).ready(function () { $('#option1').change(function () { $('.btn').removeClass().addClass('btn').addClass('btn-default'); $(this).parent().removeClass("btn-default").addClass("btn-success"); }); $('#option2').change(function () { $('.btn').removeClass().addClass('btn').addClass('btn-default'); $(this).parent().removeClass("btn-default").addClass("btn-warning"); }); $('#option3').change(function () { $('.btn').removeClass().addClass('btn').addClass('btn-default'); $(this).parent().removeClass("btn-default").addClass("btn-danger"); }); }); 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active </label> <label class="btn btn-default"> <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive </label> <label class="btn btn-default"> <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found </label> </div>
+1
source share

More articles:


All Articles