Bootstrap单选切换按钮切换css答案

【问题标题】：Bootstrap radio toggle buttons switch cssBootstrap单选切换按钮切换css
【发布时间】：2021-06-20 21:24:12
【问题描述】：

我使用的是 Bootstrap 3.37 版，我有两个切换按钮可供用户选择。

我想要做的是一旦蓝色按钮被点击，它应该是深色的“活动”，如果绿色按钮被点击，那么绿色应该是“活动”。我怎么做？现在，无论我单击哪个切换按钮，绿色始终是“活动”按钮。我是否必须编写任何 javascript 代码才能手动执行此操作，或者是否有可以在我可以使用的 boostrap 中使用的内置函数？谢谢。

    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-default active" >
        <input type="radio" name="green" id="green" value="green"> Green
      </label>
      <label class="btn btn-default" >
        <input type="radio"  name="blue" id="blue" value="blue"> Blue
      </label>
    </div>

【问题讨论】：

请修改您的帖子标题，提出一个清晰、具体的问题，而不仅仅是列出关键字。
您必须为两个收音机提供相同的name，否则用户可以同时选择两者。

标签： javascript jquery bootstrap-4 togglebutton

【解决方案1】：

除了@Dave Cross 提到的之外，您不能只切换没有javascript 的活动类。但是你可以通过简单的 HTML 和 CSS 来实现它，只需像下面这样稍微重新构建你的 HTML 模板

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    padding: 6px 12px;
    border-style: solid;
    border-width: 1px;
}

input {
 display: none;
}

input:checked + label{
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

<div class="btn-group" data-toggle="buttons">
  <input type="radio" name="color" id="green" value="green" />
  <label for="green" class="btn btn-default"> Green </label>
  <input type="radio"  name="color" id="blue" value="blue" />
  <label for="blue" class="btn btn-default"> Blue </label>
</div>

使用 jQuery，您可以通过监听更改事件来切换活动类，如下所示。

$('#color-switch').on('change', 'input', function() {
  const container = $(this).closest('.btn-group');
  container.find('.active').removeClass('active');
  container.find('input:checked').parent().addClass('active');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="color-switch" class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
        <input type="radio" name="color" id="green" value="green"/> Green
      </label>
  <label class="btn btn-default">
        <input type="radio"  name="color" id="blue" value="blue"/> Blue
      </label>
</div>

【讨论】：

嗨，我如何修改 javascript 代码，以便当单选按钮切换到另一个时，它可以将 css“btn btn-default active”修改为“btn btn-default”，反之亦然一个？
@Julia，用 jQuery 添加了另一个 sn-p 来切换活动类。

【解决方案2】：

这不是 Bootstrap 或 jQuery 问题；它与 Javascript 或 CSS 无关；它只是 HTML。

HTML 使用单选按钮的“名称”属性来定义集合中的单选按钮（因此当您选择集合中的另一个按钮时，它知道要关闭哪些单选按钮）。

因此，您的两个单选按钮都需要具有相同的名称属性。在下面的示例中，我将它们命名为“color”。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active" >
    <input type="radio" name="colour" id="green" value="green"> Green
  </label>
  <label class="btn btn-default" >
    <input type="radio"  name="colour" id="blue" value="blue"> Blue
  </label>
</div>

【讨论】：