Question

我正在使用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。

因此，如果我点击Age按钮，它将如下所示：

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

我尝试使用Jquery .removeClass（）和.addClass（），但无法使其正常工作。

有谁知道怎么做？

Answer 1

使用bootstrap，点击的内容不是单选按钮，而是标签。您应该将功能绑定到单选按钮的单击事件。

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

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

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

Answer 2

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

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

FIDDLE

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

2 个答案: