bootstrap 如何确定复选框/单选按钮的选中状态

Question

我目前正在尝试调试使用引导程序 HTML 和 CSS 并将其转换为不同文档格式的应用程序。 当使用“custom-control-input”类对复选框进行样式设置时，会显示复选框，但“checked”属性丢失，我最终得到一个未选中的引导程序复选框。

我确信应用程序会检查是否设置了属性，并且正常的复选框会被正确解析。

我知道当引导程序用于通过以下方式创建复选框时：

<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 使用不透明度隐藏复选框，然后使用“自定义控件标签”显示引导复选框。

我似乎无法弄清楚引导程序如何确定是否应该选中复选框。 它是否仅使用 CSS 规则，或者是否涉及一些 JavaScript/JQuery？

Answer 1

我检查了引导程序在这种情况下是如何工作的，这是在:checked伪类的帮助下完成的。 链接https://developer.mozilla.org/ru/docs/Web/CSS/:checked 。

这是相对所有的引导实现代码。

 .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>