jquery - 使用切换按钮更新值

Question

我有这个复选框可以帮助我向 Controller 发送一个值:

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

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

切换按钮的代码(我不明白如何使用切换将值发送到 Controller ):

<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 的 fiddle :JSFiddle

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

Razor :

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

j查询:

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