如何检查 Bootstrap 4 的自定义复选框状态？答案

【问题标题】：How to check Bootstrap 4's custom checkbox state?如何检查 Bootstrap 4 的自定义复选框状态？
【发布时间】：2018-08-01 13:35:41
【问题描述】：

从来没有提到如何正确使用自定义复选框，使用检查器似乎没有添加任何类，并且值始终为“on”。

也没有提到如何通过 html 或 javascript 更改它们的状态。

Js：

$('.custom-control-input').on('change', evt => {
    console.log(evt.target.value);
})

【问题讨论】：

$(evt.target).prop('checked') ?
"on" 是复选框的默认值。如果要更改此值，则必须向 <input type="checkbox" value="whateveryouwant"> 添加一个值。这是原版的老式 HTML。
@ZimSystem 你指给他回他第一段中的链接...
我只是觉得“我们使用同级选择器来正确设置自定义表单指示器的样式”这句话令人困惑
jsfiddle.net/2n40w13k/8

【解决方案1】：

这是通过使用 :checked、:active 和 :focus 伪类来完成的。

因此，当您单击自定义复选框（或单选按钮）时，:checked 伪类将应用于它。当您再次单击它时，该伪类将被删除。这就是您使用 css 更改外观的目标。

JavaScript/jQuery 也是如此。如果您想以这种方式控制它，则需要通过 JavaScript/jQuery 添加/删除相应的伪类 (:checked)。

我在这里回答的最后一个 sn-p：

更详细地解释它。

【讨论】：

【解决方案2】：

在你的事件处理程序中试试这个：

$(evt.target).is(':checked')

【讨论】：