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

Posted 2023-02-22

【中文标题】如何检查 Bootstrap 4 的自定义复选框状态？

【英文标题】：How to check Bootstrap 4's custom checkbox state?

【发布时间】：2018-08-01 13:35:41

【问题描述】：

在他们的文档中：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);
)

【问题讨论】：

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

https://***.com/a/48401949/8270343

更详细地解释它。

【讨论】：

我不明白如何将您的答案应用于 javascript/jquery

如果你想这样控制它，你需要通过 JavaScript/jQuery 添加相应的伪类。

以防万一，角度 2+ 示例：***.com/questions/40214655/…

【参考方案2】：

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

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