從html複選框中獲取值/狀態使用asp.net中的css3風格

Question

我有一個樣式化的html複選框，它在管理頁面上設置一些布爾值。點擊「保存」按鈕時，我想獲取複選框的狀態/值，以更新數據庫。

現在我知道我可以將rutan="server"添加到控件，但由於某種原因打破了CSS，複選框無法再被檢查。

那麼在這裏獲得價值的方法是什麼？或最佳做法是什麼？

這是一個webforms應用程序。

開關（CSS/HTML）：

.cmn-toggle { 
    position: absolute; 
    margin-left: -9999px; 
    visibility: hidden; 
} 
.cmn-toggle + label { 
    display: block; 
    position: relative; 
    cursor: pointer; 
    outline: none; 
    user-select: none; 
} 

input.cmn-toggle-round + label { 
    padding: 2px; 
    width: 40px; 
    height: 20px; 
    background-color: #dddddd; 
    border-radius: 60px; 
} 
input.cmn-toggle-round + label:before, 
input.cmn-toggle-round + label:after { 
    display: block; 
    position: absolute; 
    top: 1px; 
    left: 1px; 
    bottom: 1px; 
    content: ""; 
} 
input.cmn-toggle-round + label:before { 
    right: 1px; 
    background-color: #f1f1f1; 
    border-radius: 60px; 
    transition: background 0.4s; 
} 
input.cmn-toggle-round + label:after { 
    width: 19px; 
    background-color: #fff; 
    border-radius: 100%; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    transition: margin 0.4s; 
} 
input.cmn-toggle-round:checked + label:before { 
    background-color: #8ce196; 
} 
input.cmn-toggle-round:checked + label:after { 
    margin-left: 20px; 
} 

.switch-align { 
    margin-top: 5px; 
} 


<input id="switchAdmin" class="cmn-toggle cmn-toggle-round" type="checkbox" /> 
<label for="switchAdmin"></label> 

Answer 1

當你對HTML控件設置runat="server"，按默認的網頁形式將覆蓋id屬性是一個獨特的 「可預測」 的價值。

因此，您的標籤的for屬性將與底層的複選框不匹配，因此:checked狀態將不會被執行。

嘗試轉換<input type="checkbox" ..到<asp:Checkbox ID=".."，並確保你的CheckBox控件的ClientIDMode屬性設置爲static，這將確保你進入ID字段不會被覆蓋在渲染，無論價值。

<asp:Checkbox ID="switchAdmin" CssClass="cmn-toggle cmn-toggle-round" ClientIDMode="Static" Runat="server" /> 
<label for="switchAdmin"></label>