Question

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

我有三个单选按钮;

活性
非活性
未找到

我想在点击按钮时更改按钮的（Bootstrap v3）类。它们都具有默认类btn-default。但是，当点击时，我希望拥有以下类别;

有效（btn-success）
无效（btn-warning）
未找到（btn-danger）

任何时候都只能选择一个，任何时候都应该只有一个。

我的代码到目前为止，我想我差不多了。如果有人可以提供一些很棒的建议。

Here is a link to my jsfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

JSFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，你应该在 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>

Answer 3

您拥有的代码不会更改类，因为您的目标是错误的元素。但是，其他答案没有考虑到您希望任何时候只有一个被着色。只需包含删除类，并根据每个类的更改添加默认类。试试这个：

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

Answer 4

$(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-“插入引导按钮样式”的标签，通过调用parent（），你上升到控制CSS的级别。 / p>

此外，概括了删除：

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

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>

Answer 6

问题是您将更改事件处理程序绑定到input，但<label>是使用{{btn-default设置的样式。 1}}。

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

Answer 7

其次，您的选择器选择子元素，但您需要更改父类。所以你需要在这里使用parent（）

要只激活一个，您必须从其他按钮中删除该类。这是代码

$('.btn').removeClass().addClass('btn').addClass('btn-default');

＆＃13;

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

＆＃13;

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

＆＃13;

点击

7 个答案: