从服务器端的 asp.net 自定义复选框获取和设置值答案

【问题标题】：get and set the value from asp.net customized checkbox from server side从服务器端的 asp.net 自定义复选框获取和设置值
【发布时间】：2017-01-24 10:06:28
【问题描述】：

这是我的html 代码

.checkboxFour {
  width: 40px;
  height: 40px;
  background: #ddd;
  margin: 20px 90px;
  border-radius: 100%;
  position: relative;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.checkboxFour label {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 100px;
  transition: all .5s ease;
  cursor: pointer;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  background: #333;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.checkboxFour input[type=checkbox]:checked + label {
  background: #26ca28;
}
input[type=checkbox] {
  visibility: hidden;
}

<section>
  <div class="checkboxFour">
    <input type="checkbox" value="1" id="checkboxFourInput" name="" />
    <label for="checkboxFourInput"></label>
  </div>
</section>

Fiddle Demo

如何从服务器端获取和设置此复选框值？使用 HiddenField 什么的？

【问题讨论】：

您使用的是 ASP.Net Web 表单还是 MVC？
asp.net 网络表单！
不使用 ASP Web 控件的任何具体原因？在这种情况下 assp:CheckBox?
我可以设置 asp:CheckBox 的样式吗？
您的样式完全基于 CSS，所以是的。您可以按照自己的方式设置 Web 控件的样式。

标签： html css asp.net checkbox

【解决方案1】：

<input type="checkbox" runat="server" value="1" id="checkboxFourInput" name="" />

string cbvalue = checkboxFourInput.Value;//get
checkboxFourInput.Value = val;//set

添加runat="server" 属性以从服务器端获取/设置值。将其放在具有runat="server" 属性的form 标记内

【讨论】：

如果我添加runat="server" 属性，复选框将不起作用！
你把它放在具有 runat="server" 属性的表单标签中了吗？
我把它放在contentPlaceHolder 里面，有runat="server" 属性！
母版页是否有表单标签？
是的，主主页有带有runat=server的表单标签

【解决方案2】：

创建一个 ASPX 页面并添加以下代码：

<div>
        <input type="checkbox" runat="server" id="checkBox" value="MyTest" />
        <asp:Label ID="lbCheckBoxValue" runat="server" />
</div>

<asp:Button runat="server" OnClick="Button_Click" />

在文件后面的代码中添加以下代码：

protected void Button_Click(object sender, EventArgs e)
    {
        if (checkBox.Checked)
            lbCheckBoxValue.Text = checkBox.Value;
        else
            lbCheckBoxValue.Text = "";

    }

试试上面的代码。

【讨论】：