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>