从 html 样式为 css3 的复选框获取值/状态 asp.net

Question

我有一个样式为 html 的复选框，用于在管理页面上设置一些布尔值。点击 "Save" 按钮后，我想获取复选框的状态/值并更新数据库。

现在我知道我可以将 rutan="server" 添加到控件中，但由于某些原因破坏了 css 并且无法再选中复选框。

那么这里获取值的方法是什么？或者最佳做法是什么？

这是一个网络表单应用程序。

切换(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" 时，Web 表单默认会覆盖 id 属性，使其成为唯一的 "predictable" 值。

因此，您的标签的 for 属性将与基础复选框不匹配，因此 :checked 状态永远不会被执行。

尝试将 <input type="checkbox" .. 转换为 <asp:Checkbox ID=".." 并确保将复选框控件的 ClientIDMode 属性设置为 static 这将确保您输入的任何值ID 字段在渲染期间不会被覆盖。

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

从 html 样式为 css3 的复选框获取值/状态 asp.net

Get value / state from html checkbox styled with css3 in asp.net

html

css

asp.net

checkbox

webforms