Using Toggle Button to Update Value

Question

I have this check box which helps me to send a value to the controller:

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

I'm having trouble figuring out how to change the check box to a toggle on/off switch.

The code for the toggle button (I don't understand how to send the value to the controller using toggle):

<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;
}

Do you have a submit button or you want to submit the new value with ajax? — Ugur Altay
– Ugur Altay, Commented Jul 30, 2015 at 14:06
should wrap label around checkbox or give it a valid for to bind events on lable to checkbox — charlietfl
– charlietfl, Commented Jul 30, 2015 at 14:31
I would change your checkbox to a hidden, and create an input[type='button'] and use jquery to change the hidden value on click. Although I'm not sure I entirely understand your question. — Steve0
– Steve0, Commented Jul 30, 2015 at 14:47
@Html.CheckBoxFor(m => m.sendvalue, htmlAttributes: new { @id = "sendvalue" } when i use this and click submit..the value is getting to the model...i want to know how to do the same with the toggle. i donno jquery. — virtualreality
– virtualreality, Commented Jul 30, 2015 at 14:52

Steve0 · Accepted Answer · 2015-07-30 20:13:07Z

1

In this example I am using 1 and 2 for the values you are toggling.

Here is a fiddle with the html produced: JSFiddle

Here is a more complete .NET fiddle without your CSS: .NET Fiddle, it toggles between true and false and uses a TextBoxFor demo purposes instead of a HiddenFor.

razor:

@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);
    });
});

edited Jul 30, 2015 at 20:13

answered Jul 30, 2015 at 15:04

Steve0

2,2532 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

virtualreality Over a year ago

<label for="sendvalue"></label> without this label the toggle button is not showing

Steve0 Over a year ago

changed answer to include label. Didn't realize that Html.Checkbox didn't create it.

virtualreality Over a year ago

the label for = is not working ; its showing cannot resolve id tglSendValue

Steve0 Over a year ago

you can try after the css definition to add , @id = "tglSendValue"

Steve0 Over a year ago

You will have to provide me a larger snippet of your Razor code and the generated HTML. Perhaps plug your stuff in here: dotnetfiddle.net/CsMvc

Collectives™ on Stack Overflow

Using Toggle Button to Update Value

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related