Change bootstrap radio on click

Question

I'm sure what I'm trying to do is quite simple however I require some help.

I have three radio buttons;

• active
• inactive
• not found

Id like to change the (Bootstrap v3) class of the buttons when they are clicked. They all have a default class of btn-default. However when clicked i'd like then to have the following classes;

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

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

My code so far is below, I think I'm nearly there. If somebody could offer some advice that would be great.

Here is a 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>

Answer 1

You can have a click event on btn-default instead 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>

Answer 2

The code you have is not changing the classes because you are targetting the wrong elements. However, the other answers failed to take into account that you want only one to be coloured at any one time. Simply include the removing classes and adding the default classes back on changes of each. Try this:

$(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");
  });
});

Answer 3

Man, first of all, you should include bootstrap.js after jquery.js
Second, your selector selects child element, but you need to change class of parent. So you need to use parent() here

Code snippet below:

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