How does bootstrap determine checked state of checkbox/radiobutton

Question

I'm currently trying to debug an application that consumes bootstrap HTML and CSS and converts it to a different document format. When using the 'custom-control-input' class for styling on the checkboxes, the checkboxes are being displayed but the 'checked' attribute is lost and I end up with an unchecked bootstrap checkbox.

I'm certain the application checks to see if the attribute is set, and normal checkboxes get parsed correctly.

I know that when bootstrap is used to create checkboxes in the following way:

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="defaultUnchecked">
<label class="custom-control-label" for="defaultUnchecked">Default unchecked</label>

bootstrap uses opacity to hide the checkbox and then uses the 'custom control label' to display the bootstrap checkbox.

What I cannot seem to figure out is how bootstrap then determines if the checkbox is supposed to be checked. Does it use only CSS rules for this, or is there some JavaScript/JQuery involved?

Answer 1

I checked how bootstrap works in this case, this is done with the help of a :checked pseudo-class. Link https://developer.mozilla.org/ru/docs/Web/CSS/:checked .

Here is the relatively all code that is a bootstrap implementation.

 .custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; } .custom-control-input { position: absolute; left: 0; z-index: -1; width: 1rem; height: 1.25rem; opacity: 0; } .custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; } label { display: inline-block; line-height: 1.5; } .custom-control-input:checked~.custom-control-label::before { color: #fff; border-color: #007bff; background-color: #007bff; } .custom-checkbox .custom-control-label::before { border-radius: .25rem; } .custom-control-label::before, .custom-file-label, .custom-select { transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .custom-control-label::before { position: absolute; top: .25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; pointer-events: none; content: ""; background-color: #fff; border: #adb5bd solid 1px; } .custom-checkbox .custom-control-input:checked~.custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); } .custom-control-label::after { position: absolute; top: .25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; background: no-repeat 50%/50% 50%; } *, ::after, ::before { box-sizing: border-box; }

 <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="exampleCheck1"> <label class="custom-control-label" for="exampleCheck1">Check me out</label> </div>