点击更改Bootstrap单选按钮

Question

我相信我想要做的事情非常简单，但我需要一些帮助。

我有三个单选按钮：

• active
• inactive
• not found

当单选按钮被点击时，我希望更改（Bootstrap v3）类。 它们都具有默认类 btn-default。但是当单击时，我希望它们具有以下类：

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

每次只能选择一个，每次只能着色一个。

到目前为止，我的代码如下，我认为我已经接近成功了。 如果有人能提供一些建议，那就太好了。

这里是我的 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>

- jonboy

---

如果你使用空括号运行$(this).removeClass();，它会删除所有类。只需尝试$(this).removeClass().addClass("newClass")。那应该可以工作。 - Fearodin

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>

- Rajesh

---

完美的、易于定制的决策。 - WinK-

Answer 2

你的代码没有改变类别，因为你的目标元素不对。然而，其他答案没有考虑到你想要任何时候只有一个颜色。只需在每个更改时包括移除类和添加默认类。 试试这个：

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

- BroDev

---

我在选项3中未能包含.parent()，现在我已经更正了这个错误。 - BroDev

Answer 3

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

先删除目前应用的所有类，然后确定哪个按钮被点击，并应用该选项的CSS。关于为什么CSS没有改变，是因为您没有定位应用了btn-"插入bootstrap按钮样式"的标签，在调用parent()时，您将回到控制CSS的级别。

此外，将删除通用化：

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

- Jordan Lowe

---

我喜欢使用if/else的这种方法！它与其他答案有何不同？它有什么好处吗？ - jonboy

@johnny_s 我不确定是否有任何好处，只是更整洁的代码，因为它都隔离在一个变化中。您需要检查/删除其他按钮的CSS，不重复代码是有意义的。 - Jordan Lowe

附加答案可能是更好的选择。 - Jordan Lowe

Answer 4

首先，你需要在 jquery.js 之后引入 bootstrap.js。
其次，你的选择器选中了子元素，但你需要更改父级的类。所以你需要在这里使用 parent()。

下面是示例代码：

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

- WinK-

Answer 5

您可以像这样使用自定义数据属性Custom Data Attribute：

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

- Nenad Vracar

Answer 6

其次，你的选择器选择了子元素，但你需要改变父元素的类。因此，你需要在这里使用parent()。

为了使只有一个按钮处于激活状态，你必须从其他按钮中删除类。以下是代码。

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

- Aroniaina

Answer 7

问题在于你将change事件处理程序绑定到了上，但<label>被样式化为btn-default。

将引用$(this)更改为$(this).parent()，它将按预期工作。

- Redmega