在他们的文档中：http://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios-1
从未提及如何正确使用自定义复选框，使用检查器似乎没有添加任何类，并且值始终为“on”。
还没有提到如何通过html或javascript更改其状态。
JsFiddle：https://jsfiddle.net/2n40w13k/1/
Js：
$('.custom-control-input').on('change', evt => {
console.log(evt.target.value);
})
答案 0 :(得分：4)
在您的事件处理程序中尝试此操作：
$(evt.target).is(':checked')
答案 1 :(得分：2)
通过使用<body>
<main>
<h1>Hello World</h1>
<p>Lorem ipsum dolor</p>
</main>
</body>
，:checked和:active伪类来完成。
因此，当您单击自定义复选框（或单选按钮）时，:focus伪类将应用于它。再次单击它时，将删除该伪类。这就是你用css改变外观的目标。
JavaScript / jQuery也是如此。如果你想以这种方式控制它，你需要通过JavaScript / jQuery添加/删除相应的伪类（:checked）。
我的答案的最后片段：
https://stackoverflow.com/a/48401949/8270343
进一步详细解释。