Bootstrap4 切换按钮答案

【问题标题】：Bootstrap4 toggle buttonBootstrap4 切换按钮
【发布时间】：2018-08-14 20:27:03
【问题描述】：

我正在使用 Bootstrap 4 创建a toggle button；但是，在单击按钮时，尽管正在设置 active 类，但复选框并未更新。

即使调用$('.btn-group-toggle').button('toggle') 也会设置active 状态，但不会更改复选框的checked 状态。

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-secondary">
    <input type="checkbox" value="0" />
  </label>
</div>

除了自己写一个click()函数外，有什么办法可以设置checked状态吗？

【问题讨论】：

您如何检查复选框是否未更新？因为它应该可以工作：jsfiddle.net/aoc3fL1o
你是对的！我正在使用 chrome 开发工具检查它，我希望看到 checked 值出现。我用一个普通的复选框进行了测试，并且没有出现选中的值。它正在工作，但不知何故我没有添加名称，所以我无法在服务器上捕获它。

标签： javascript html css twitter-bootstrap-4

【解决方案1】：

正如 Dan Brazier 所提到的，使用的 HTML 是正确的。我错过了输入中的name 属性，这就是我无法在服务器上捕获它的原因。所以这是更新的代码：

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-secondary">
    <input name="my-input-value" type="checkbox" value="0" />
  </label>
</div>

【讨论】：

【解决方案2】：

您的代码对我有用 - 我怀疑您没有包含正确的 JS？就我需要包含的许多提供的 JS 文件中的哪一个而言，我事后猜测自己迁移到 4，它的文档记录不多。 bootstrap.bundle.js 是一个包罗万象的包。

此外，在 Bootstrap 中有很多关于依赖关系或怪癖的小引用并没有特别突出。所以要小心确保添加正确的 aria 标签等。

【讨论】：

复选框和单选按钮仅限 css。
Vanilla 复选框和收音机本身当然不是 JS。但在此设置中，需要将 Bootstrap 按钮样式包裹起来以充当“切换按钮”JS。编辑：codepen.io/pen?template=yKLZWN - 这是 Bootstrap 4 当前版本，使用 @Ramses 代码。尝试关闭 JS 并观察按钮如何不再接收它的活动状态。