点击更改引导单选答案

【问题标题】：Change bootstrap radio on click点击更改引导单选
【发布时间】：2016-02-05 00:25:05
【问题描述】：

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

我有三个单选按钮；

有效
无效
未找到

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

活动 (btn-success)
无效 (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>

【问题讨论】：

如果你运行 $(this).removeClass();使用空的备份，它会删除所有类。试试 $(this).removeClass().addClass("newClass")。这应该工作

标签： javascript jquery html css twitter-bootstrap

【解决方案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>

【讨论】：

完美、易于定制的决策

【解决方案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");
  });
});

【讨论】：

我未能在选项 3 中包含 .parent()，我现在编辑了错误。

【解决方案3】：

伙计，首先，您应该在 jquery.js
之后包含 bootstrap.js 其次，您的选择器选择子元素，但您需要更改父类。所以你需要在这里使用parent()

下面的代码sn-p：

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

【讨论】：

【解决方案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 的级别。

另外，泛化去除：

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

【讨论】：

我喜欢这种使用 if/else 的方法！这与其他答案有何不同？有什么好处吗？
@johnny_s 我不确定是否有任何好处，只是代码更整洁，因为它们都在一次更改中隔离。您需要检查/删除其他按钮的 CSS，不要重复代码。
@附加答案可能是更好的选择。

【解决方案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>

【讨论】：

【解决方案6】：

问题是您将更改事件处理程序绑定到input，但<label> 是带有btn-default 样式的处理程序。

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

【讨论】：

【解决方案7】：

其次，您的选择器选择子元素，但您需要更改父元素的类。所以这里需要使用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>

【讨论】：