I'm trying to develop a custom toggle button and attache a text before it. I want the text and toggle to be in the same line. But, the text is coming in one line and the toggle in other.
The working code: https://jsfiddle.net/nvarun123/x6v1nevw/1/
When i add the style display:inline-block; then the shape of the toggle circle is getting disturbed. I'm trying to develop this in Angular2 as a component.
The woking code in Angular2:http://plnkr.co/edit/4ZnrnJbSyFAp5c6Z0V7T?p=preview
HTML code:
<div style="display:inline;">
Toggle1:
<div class="onoffswitch" style="margin-bottom:5px;">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked >
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div style="display:inline;">
Toggle2:
<div class="onoffswitch" style="margin-bottom:5px;">
<input type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox" id="myonoffswitch1" >
<label class="onoffswitch-label" for="myonoffswitch1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
CSS code:
.onoffswitch {
position: relative; width: 50px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border-radius: 10px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 22px; padding: 0; line-height: 22px;
font-size: 10px; color: white; font-family: sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "";//ON
padding-left: 8px;
background-color: lightgreen;
color: pink;
}
.onoffswitch-inner:after {
content: "";//OFF
padding-right: 6px;
background-color: red;
color: #F9FAFB;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 20px; margin: 0px;
background: #F9FAFB;
position: absolute; top: 0; bottom: 0;
right: 30px;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
box-shadow: 0.276px 0.961px 2px 0px rgba(0, 0, 0, 0.1);
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
Your onoffswitch class is applied to a div element, which by default has a display value of 'block'. Block elements by default will be displayed on their own line.
Add this style to the onoffswitch class:
display: inline-block;
Related
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
I have three divs, of differing heights which I need to align in a straight line horizontally. Currently, I have set them as display: inline-block but they are not aligned correctly. If I set a top or bottom margin, it still doesn't resolve itself. Any ideas how I could fix this?
/*toggle switch */
.onoffswitch {
position: relative; width: 54px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #3273F0; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #f6f6f6; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #f6f6f6; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 22px; margin: 3px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 26px;
border: 2px solid #3273F0; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #3273F0;
}
<div>
<div style="display: inline-block"> Male</div>
<div style="display: inline-block" class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked="">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div style="display: inline-block"> Fermale</div>
</div>
Create a new CSS selector for div and add the styling vertical-align: center;
/*toggle switch */
.onoffswitch {
position: relative; width: 54px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
div {
vertical-align:middle;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #3273F0; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #f6f6f6; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #f6f6f6; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 22px; margin: 3px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 26px;
border: 2px solid #3273F0; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #3273F0;
}
<div>
<div style="display: inline-block"> Male</div>
<div style="display: inline-block" class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked="">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div style="display: inline-block"> Female</div>
</div>
I have the following code for a toggle switch. All I want to do is have some text to the left of these switches but whatever I do it breaks and messes up the switches. Any help would be appreciated.
.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<section id="middle">
<h2>Heading</h2>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch4" checked>
<label class="onoffswitch-label" for="myonoffswitch4">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch5" checked>
<label class="onoffswitch-label" for="myonoffswitch5">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</section>
Not sure why it won't let me just float text to the left.
Use a table tag to organize it.
<div class="onoffswitch">
<TD align="right">Box2</TD>
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch5" checked>
Well, you must to create a swicth container for each switch and create a another child that content you text inside a tag or like you want it. You need put
display: inline-block;
In the switch and text container. Look that I edit the .onoffswitch class and add another else named .switchtext
Here's is my sample
.onoffswitch {
position: relative; width: 90px;
display: inline-block;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
.switchtext{
display: inline-block;
}
<section id="middle">
<h2>Heading</h2>
<div class="swicth-container">
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch4" checked>
<label class="onoffswitch-label" for="myonoffswitch4">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="switchtext">
<p>
TEXT
</p>
</div>
</div>
<div class="swicth-container">
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch5" checked>
<label class="onoffswitch-label" for="myonoffswitch5">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="switchtext">
<p>
SOME TEXT
</p>
</div>
</div>
</section>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
This is the sample http://jsfiddle.net/TX8fs/1/
I tried
display:block;float:left;
But the urgent input checkbox will overlap the 2 input infront of it. Any solution to fix this? I want to display the urgent input checkbox beside the label.
Something like this? jsfiddle
Note: only switched order of HTML elements inside div, and added "float: left;" to **
.select-style{
display: inline;
}
.onoffswitch {
position: relative; width: 136px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
float: left; /* ** added line ** */
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 0px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 19px; padding: 0; line-height: 15px;
font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
}
.onoffswitch-inner:before {
content: "URGENT";
padding-left: 10px;
background-color: #FF0000; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "URGENT";
padding-right: 10px;
background-color: #EEEEEE; color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 12px; margin: 0px;
background: #A1A1A1;
position: absolute; top: 0; bottom: 0;
right: 124px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #A1A1A1;
}
<!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc </label>
<!-- dropdown menu -->
<div class="select-style">
<div class="onoffswitch">
<label class="onoffswitch-label" for="#a">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
<!-- Switch order of checkbox and switch-->
<input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
</div>
</div>
The easiest solution is to simply make your .select-style an inline-block instead of an inline element, as can be seen here.
.select-style {
display: inline-block;
}
.onoffswitch {
position: relative;
width: 136px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 19px;
padding: 0;
line-height: 15px;
font-size: 12px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
}
.onoffswitch-inner:before {
content: "URGENT";
padding-left: 10px;
background-color: #FF0000;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "URGENT";
padding-right: 10px;
background-color: #EEEEEE;
color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 12px;
margin: 0px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 124px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #A1A1A1;
}
<!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc </label>
<!-- dropdown menu -->
<div class="select-style">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
<label class="onoffswitch-label" for="#a">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
However, if you additionally want to ensure that all three elements are aligned vertically, you'll need to also add vertical-align: middle to all three elements:
input, input + label, .select-style {
vertical-align: middle;
}
Which results in the following:
.select-style {
display: inline-block;
}
.onoffswitch {
position: relative;
width: 136px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 19px;
padding: 0;
line-height: 15px;
font-size: 12px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
}
.onoffswitch-inner:before {
content: "URGENT";
padding-left: 10px;
background-color: #FF0000;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "URGENT";
padding-right: 10px;
background-color: #EEEEEE;
color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 12px;
margin: 0px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 124px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #A1A1A1;
}
input, input + label, .select-style {
vertical-align: middle;
}
<!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc </label>
<!-- dropdown menu -->
<div class="select-style">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
<label class="onoffswitch-label" for="#a">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
Hope this helps! :)
I'm developing a Chrome Extension and I took some lovely toggle switches from this site to add to my main page.
Float right seems to have no effect on the toggles and I'd like to avoid using margins to position them. It would be nice if the toggles could line up under the third set of buttons above.
Any ideas?
<div class="row" id="row-6">
<div class="debug">
Debug Automation Chains
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="debug-switch">
<label class="onoffswitch-label" for="debug-switch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="row" id="row-7">
<div class="ui-dev-mode">
UI Development Mode
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="devmode-switch">
<label class="onoffswitch-label" for="devmode-switch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>`
`
.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #8F8F8F; border-radius: 10px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 17px; padding: 0; line-height: 17px;
font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ENABLED";
padding-left: 10px;
background-color: #00a3db; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "DISABLED";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 9px; margin: 4px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 69px;
border: 2px solid #8F8F8F; border-radius: 10px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
`
It's difficult to help without a link and only some of your css. Could you try the following:
.row{
display: block;
float: left;
width: 100%;
}
.debug, .ui-dev-mode {
float: left;
}
.onoffswitch {
float: right;
}
I am trying to make an on/off switch, but it works incorrectly. I have a few rows with the switch. It's auto generated so that when I click every row except the first it switches 1 row.
Here is the html:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
and css:
.onoffswitch {
position: relative;
width: 88px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 1px solid #D6D6D6;
border-radius: 5px;
}
.onoffswitch .onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch .onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 33px;
padding: 0;
line-height: 33px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-label .onoffswitch-inner:before {
content: "Yes";
padding-left: 10px;
background-color: blue; color: #FFFFFF;
}
.onoffswitch-label .onoffswitch-inner:after {
content: "No";
padding-right: 10px;
background-color: #ccc; color: #999999;
text-align: right;
}
.onoffswitch-label .onoffswitch-switch {
display: block;
width: 30px;
margin: 5px 0;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 53px;
border: 2px solid #D6D6D6; border-radius: 5px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch > .onoffswitch-checkbox:checked + .onoffswitch-label > .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch > .onoffswitch-checkbox:checked + .onoffswitch-label >.onoffswitch-switch {
right: 0px;
}
I try to do it with CSS only, without JS(JQuery, etc...)
Can you tell me what's wrong?
Your code is correct here's an example: https://jsfiddle.net/Lfv76omw/
You should set an unique id and name attribute for the elements
name="onoffswitch" id="myonoffswitch" and for="myonoffswitch" must be unique.
I simply added an incremental number like
name="onoffswitch1" id="myonoffswitch1" and for="myonoffswitch1"
name="onoffswitch2" id="myonoffswitch2" and for="myonoffswitch2"
name="onoffswitch3" id="myonoffswitch3" and for="myonoffswitch3"