Bootstrap 单击时更改活动的单选按钮 CSS答案

【问题标题】：Bootstrap Changing the active radiobutton CSS when clickedBootstrap 单击时更改活动的单选按钮 CSS
【发布时间】：2014-11-14 16:52:07
【问题描述】：

我在 Bootstrap3 中使用了 3 个单选按钮。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="options" id="option1" class="namesort" autocomplete="off" checked/>Name
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2" class="agesort" autocomplete="off" /> Age
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option3" class="salarysort" autocomplete="off" />Salary
  </label>
</div>

按钮在未选中时需要使用 btn-default css，在选中时需要使用 btn-primary active css。

所以如果我点击年龄按钮，它会是这样的：

  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" class="agesort" autocomplete="off" /> Age

我尝试使用 Jquery .removeClass() 和 .addClass() 但无法正常工作。

有人知道怎么做吗？

【问题讨论】：

你能贴出你尝试的 jQuery 代码吗？

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用引导程序，点击的不是单选按钮，而是标签。您应该将您的功能绑定到单选按钮的点击事件。

$('label').click( function() {
  $(this).addClass('btn-primary').removeClass('btn-default').siblings().removeClass('btn-primary').addClass('btn-default');
});

（也有可能，如果您在此解决方案中使用该函数，则应限制代码中的选择器，而不是应用于所有标签）

添加了 bootply：http://www.bootply.com/FQKkiIUGlY

【讨论】：

您还需要将活动类添加到获得btn-primary的类。
@MattD 您不需要添加活动类。 Bootstrap 之后会自行完成。

【解决方案2】：

你可以通过这样做得到你的结果。

$('label').click(function() {
    $('label.btn-primary').removeClass('btn-primary').addClass('btn-default');
    $(this).removeClass('btn-default').addClass('btn-primary');
});

FIDDLE

【讨论】：