I'm using Bootstrap 4 to create a toggle button; however, on clicking the button the checkbox is not being updated, although the active class is being set.

Even calling $('.btn-group-toggle').button('toggle') sets the active state, but does not change the checked status of the checkbox.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-secondary">
    <input type="checkbox" value="0" />
  </label>
</div>

Is there any way to set the checked status, other than writing a click() function myself?

I'm using Bootstrap 4 to create a toggle button; however, on clicking the button the checkbox is not being updated, although the active class is being set.

Even calling $('.btn-group-toggle').button('toggle') sets the active state, but does not change the checked status of the checkbox.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-secondary">
    <input type="checkbox" value="0" />
  </label>
</div>

Is there any way to set the checked status, other than writing a click() function myself?

• javascript
• html
• css
• twitter-bootstrap-4

• 1 How did you check if the checkbox wasn't updated? Because it should work: jsfiddle/aoc3fL1o – Ron van der Heijden Commented Mar 9, 2018 at 10:26
• You're right! I was checking it with chrome dev tools, and I expected to see the checked value appear. I tested with a plain checkbox and the checked value did not appear. It is working, but somehow I was not adding a name, so I couldn't catch it on the server. – Ramses Commented Mar 9, 2018 at 14:45

2 Answers 2

Your code works for me - I suspect you've not got the right JS included? I second-guessed myself migrating to 4 in terms of which of the many supplied JS files I'd need to include, it's not very documented. The bootstrap.bundle.js is the catch-all one that contains everything.

Also, there are a lot of little references to dependancies or quirks in Bootstrap that aren't particularly well highlighted. So be careful to ensure you add the right aria labels etc.

As Dan Brazier mentions, the HTML used is correct. I was missing the name attribute on the input, so that's why I was unable to catch it on the server. So this is the updated code:

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-secondary">
    <input name="my-input-value" type="checkbox" value="0" />
  </label>
</div>