Twitter Bootstrap Question posted in

Change bootstrap radio on click – Twitter bootstrap

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

7

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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");
  });
});
    Login or Signup to reply.
  3. 0

    The issue is you’r binding your change event handler to the input‘s, but the <label>‘s are the ones that are styled with btn-default.

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

    Login or Signup to reply.
  4. 0 
    $(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 classes currently applied, once that’s done, figure out which button has been clicked and apply that options CSS. In regards to why the CSS wasn’t changing, you was not targeting the labels in where the btn-“insert bootstrap button styling here” was applied, by calling parent(), you go up to the level which controlled the CSS.

    In addition, generalise the removal:

    $(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");
};
    Login or Signup to reply.
  5. 0

    Second, your selector selects child element, but you need to change class of parent. So you need to use parent() here

    To get only one to be activate, you must remove class from other button. this is the 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>
    Login or Signup to reply.
  6. 0

    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>
    Login or Signup to reply.
  7. 0

    You could use 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search