5

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);
})
Mojimi
  • 2,561
  • 9
  • 52
  • 116
  • 1
    $(evt.target).prop('checked') ? – GhitaB Feb 21 '18 at 20:38
  • "on" is the default value for checkboxes. you have to add a value to `` if you want to change this. this is vanilla oldschool HTML. – mpen Feb 21 '18 at 20:40
  • @ZimSystem You pointed him back to the link in his first paragraph... – mpen Feb 21 '18 at 20:41
  • I just thought it was confusing the phrase "We use the sibling selector to properly style our custom form indicator" – Mojimi Feb 21 '18 at 20:45
  • 1
    https://jsfiddle.net/2n40w13k/8/ – GhitaB Feb 21 '18 at 20:47
  • Functionally it's the same as any checkbox.. it's just styled differently using CSS pseudo selectors. – Carol Skelly Feb 21 '18 at 20:50
  • @Mojimi The reason that phrase is confusing is because the custom checkbox is NOT using the HTML input element at all. That element is *hidden* via css. So, what you are seeing only looks like a checkbox but it's not the actual HTML input for the checkbox. – WebDevBooster Feb 21 '18 at 20:51

2 Answers2

8

Try this in your event handler:

$(evt.target).is(':checked')
combatc2
  • 1,215
  • 10
  • 10
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.

WebDevBooster
  • 14,674
  • 9
  • 66
  • 70