javascript - 单击更改 Bootstrap radio

Question

我确定我要做的事情很简单，但我需要一些帮助。

我有三个单选按钮；

• 活跃
• 不活跃
• 没有找到

我想在单击按钮时更改按钮的 (Bootstrap v3) 类。它们都有一个默认类 btn-default。但是，当我点击时，我希望有以下类(class)；

• 活跃(btn-成功)
• 不活跃(btn-warning)
• 未找到(btn-danger)

在任何时候只能选择一个，并且在任何时候只能为一个着色。

到目前为止我的代码在下面，我想我快到了。如果有人可以提供一些建议，那就太好了。

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

您可以在 btn-default 上设置一个点击事件，并且只有一个处理程序:

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>