How to check Bootstrap 4's custom checkbox state?

Question

In their documentation here : http://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios-1

It's never mentioned how to properly use the custom checkboxes, using the inspector it doesn't seem like any class is added, and the value is always "on".

It's also not mentioned how do I change their state via html or javascript.

JsFiddle : https://jsfiddle.net/2n40w13k/1/

Js :

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

Answer 1

Try this in your event handler:

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

Answer 2

That is done by using the :checked, :active and :focus pseudo-classes.

So, when you click a custom checkbox (or radio button), the :checked pseudo-class is applied to it. When you click it again, that pseudo-class is removed. And that's what you target with css to change appearance.

The same is true for JavaScript/jQuery. You'd need to add/remove the corresponding pseudo-class (:checked) via JavaScript/jQuery if you wanted to control it that way.

The last snippet of my answer here:

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

explains it in further detail.