Question

我有这个复选框，可以帮助我向控制器发送一个值：

@Html.CheckBoxFor(m => m.sendvalue, htmlAttributes: new { @id = "sendvalue" })

我无法弄清楚如何将复选框更改为切换开/关开关。

切换按钮的代码（我不明白如何使用切换将值发送到控制器）：

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

CSS：

    .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: 45px;
  height: 22.5px;
  background-color: #dddddd;
  border-radius: 22.5px;
}
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: 22.5px;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 21.75px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 0.75px 1.825px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #6C9F2E;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 22.75px;
}

Answer 1

在这个例子中，我使用1和2作为你要切换的值。

以下是制作html的小提琴：JSFiddle

这是一个没有CSS的更完整的.NET小提琴：.NET Fiddle，它在true和false之间切换，并使用TextBoxFor演示而不是HiddenFor。

剃刀：

@Html.CheckBox("tglSendValue", new {@id="tglSendValue", @class="cmn-toggle cmn-toggle-round"})
<label for="tglSendValue"></label>
@Html.HiddenFor(m=> m.sendvalue)

jquery的：

$(function(){
    $("#tglSendValue").click(function(e){
        $("#sendvalue").val($("#sendvalue").val() == 1? 2 : 1);
    });
});

使用切换按钮更新值

1 个答案: