I have this HTML form:
<div class="animated-switch">
<input id="switch-success" name="switch-success" checked="" type="checkbox">
<label for="switch-success" class="label-success"></label>
</div>
How i can know if the input is checked or not ?
I tried like this but nothing alerted:
$(document).on('click','.animated-switch',function(e){
alert($('#switch-success:checked').val() );
});
Here a JSFIDDLE file in order to see my clear example: https://jsfiddle.net/s2f9q3fv/
Your code works fine in the snippet. You have forgotten to add value to your checkbox, but even without it you should be able to see the alert message with undefined value (see below the value 'test' was added in the snippet).
$(document).on('click','#switch-success:checked',function(e){
alert($('#switch-success:checked').val() );
});
.animated-switch > input[type="checkbox"] {
display: none; }
.animated-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px; }
.animated-switch > label::before {
background: black;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position: absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px; }
.animated-switch > label::after {
background: white;
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px; }
.animated-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5; }
.animated-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="animated-switch">
<input id="switch-success" name="switch-success" checked="" value="test" type="checkbox">
<label for="switch-success" class="label-success"></label>
</div>
UPDATE:
You should bind the click event on the checkbox itself, not the parent. Try the snipped again with the fancy animation.
Notice if you want the alert always to be executed you have to remove the :checked attribute in the selector.
Try this
$(".animated-switch").change(function () {
alert($('#switch-success:checked').val() );
});
I still had problems and came up with a workaround:
<input class="form-check-input" type="checkbox" id="inlineCheckbox1"
onclick="document.getElementById('inlineCheckbox1').setAttribute('value',
document.getElementById('inlineCheckbox1').value * -1)" value='-1'>
<label class="form-check-label" for="inlineCheckbox1">1</label>
I set a 'onclick' event and I set a 'value' attribute to -1. When you click on the checkbox or the label, 'value' will change its sign. So when you want to get the value, grab the 'value' attribute and check if it's greater or less than zero.
Related
I have a date input and I want it to have a placeholder, so I added a label and a display none.
I have this code:
document.querySelector("#date").onchange = (e) => {
document.querySelector("#datelabel").innerHTML = e.target.value;
}
#datelabel {
padding: 16px;
border-radius: 15px;
border: 2px solid rgba(0, 0, 0, 0.8);
outline: none;
font-size: 20px;
transition: .2s;
width: 200px;
display: block;
}
<input type="date" name="date" id="date" style="display:none;">
<label class="input" for="date" style="color:var(--text);" id="datelabel">Date</label>
It works fine on Firefox, but not on Chrome.
If I remove the display of none of the input, it works, but I don't want the real input to be visible.
I tried to set a height and width to 0, an overflow: hidden, to remove the paddings and margins, but it created a mess in the display of my page, so I want to keep the display of none and find another solution.
Edit:
I hid it another way:
position: absolute;
visibility: hidden;
It works now.
Try this, it works
input {
padding: 16px;
border-radius: 15px;
border: 2px solid rgba(0, 0, 0, 0.8);
outline: none;
font-size: 20px;
transition: .2s;
width: 200px;
display: block;
}
::placeholder {
color:black;
font-size: 25px;
}
<input type="text" name="date" id="date" id="datelabel" style="display:block;" placeholder="Date">
I have an issue with the checkbox checked. I am trying to find a solution that is when my current checkbox is checked to change the opacity others checkbox. is that possible with CSS? I made it with CSS input and label. Here is my code.
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
display: block;
}
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox:checked + label {
opacity: 1;
}
.styled-checkbox:checked + label label {
opacity: 0.5;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
font-size: 0.875rem;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: text-top;
border: 1px solid #000;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 1px;
top: 7px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 #000, 4px 0 0 #000, 4px -2px 0 #000, 4px -4px 0 #000, 4px -6px 0 #000, 4px -8px 0 #000;
transform: rotate(45deg);
transition: all 0.3s ease-out;
}
<ul>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-1" />
<label for="styled-checkbox-1">Test one</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-2" />
<label for="styled-checkbox-2">Test Two</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-3" />
<label for="styled-checkbox-3">Test Three</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-4" />
<label for="styled-checkbox-4">Test Four</label>
</li>
</ul>
`
desire goal is something like that
I hope you guys understand the problem. Thanks in advance
Just remove this declaration: .styled-checkbox:checked + label label and add another one .styled-checkbox.inactive + label to set opacity of "inactive" checkboxes.
After the DOM is loaded, get all checkboxes and add a click listener
If no checkbox is checked, remove 'inactive' class from all of them
If at least one checkbox is checked, add the 'inactive' class to all unchecked
window.addEventListener('load', function() {
let checks = document.querySelectorAll('.styled-checkbox');
checks.forEach(function(check) {
check.addEventListener('click', chkStyles);
});
function chkStyles() {
// Verify if there's at least one checkbox checked
let checked = document.querySelectorAll('.styled-checkbox:checked');
if(checked.length == 0) {
// No checked checkbox, remove all inactive
checks.forEach(function(check) { check.classList.remove('inactive'); });
} else {
// At least 1 is checked
checks.forEach(function(check) {
if(check.checked) {
check.classList.remove('inactive');
} else {
check.classList.add('inactive');
}
});
}
}
});
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
display: block;
}
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox:checked + label {
opacity: 1;
}
.styled-checkbox.inactive + label {
opacity: 0.5;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
font-size: 0.875rem;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: text-top;
border: 1px solid #000;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 1px;
top: 7px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 #000, 4px 0 0 #000, 4px -2px 0 #000, 4px -4px 0 #000, 4px -6px 0 #000, 4px -8px 0 #000;
transform: rotate(45deg);
transition: all 0.3s ease-out;
}
<ul>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-1" />
<label for="styled-checkbox-1">Test one</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-2" />
<label for="styled-checkbox-2">Test Two</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-3" />
<label for="styled-checkbox-3">Test Three</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-4" />
<label for="styled-checkbox-4">Test Four</label>
</li>
</ul>
Basically, I am creating a form where the user clicks into a field and the label repositions to the top of the field.
I can get the label to move up when a user clicks into the field but when a user clicks out the field, the label doesn't go back to this correct position.
$(".js-form-item").on("click", function() {
$(this).addClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
Thanks for your help in advance!
Cheers
Basically, you're not checking when shouldvthe label goes back to its default position. Logically that would be if the input field is empty the label goes back to its position. By attaching a blur event listener to the input field that has a class of .form-item__input then we can achieve the behaviour you want. So check this out:
$(".js-form-item").on("click", function () {
$(this).addClass('form-item--input-filled');
});
$(".form-item__input").on("blur", function () {
if($(this).val() === '') {
$(this).parent('.js-form-item').removeClass('form-item--input-filled');
}
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input, .form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px,-5px,0) scale3d(0.7,0.7,1);
}
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
The label will get back to its default position only if the input field is empty, so if the input field has some value the label will stay on top.
In your case I think you don't need to track click outside the element, because you need an event when your input loses focus. For that you can add .blur() listener to your input and remove the class which you added previously.
https://api.jquery.com/blur/
Use .blur() and it will solve your issue.
$(".js-form-item").on("click", function() {
$(this).addClass('form-item--input-filled');
});
$(".js-form-item > input").on("blur", function() {
$(this).parent().removeClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
But in my opinion you should use .focus() rather than your .click() function
$(".js-form-item > input").on("focus", function() {
$(this).parent().addClass('form-item--input-filled');
});
$(".js-form-item > input").on("blur", function() {
$(this).parent().removeClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
Hope this solved your issue.
Your code is ok, only change it similar this. It will works stylish!. simple and short:
$(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); })//exactly your code
.on("focusout",
function(){
$(this).removeClass('form-item--input-filled');
}
);
Extra descriptions:
I have used focusout event that works fine always. I have tested it on my mobile and all things is fine.
I have a form which currently works fine, only thing I would like it to do is when I fill the text, the placeholder also should show whatever I type in the field.
Lets say if I am filling First Name:
Bob The Builder, the place holder should also show the same 'Bob The Builder' instead of 'First Name'.
Below is the related code to it:
Form-rise-click here for fiddle
HTML:
<div class="wrap">
<div>
<label for="fname">First Name</label>
<input id="fname" type="text" class="cool"/>
</div>
<div>
<label for="lname">Last Name</label>
<input id="lname" type="text" class="cool"/>
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" class="cool"/>
</div>
</div>
CSS:
body {
font-family: 'Lato', sans-serif;
color: black;
background-color: white;
}
h1 {
font-size: 60px;
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
color: #999;
}
div.wrap {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
div.wrap div {
position: relative;
margin: 50px 0;
}
label {
position: absolute;
top: 0;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: white;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 100%;
padding: 20px;
border: 2px solid black;
font-size: 20px;
background-color: white;
color: black;
}
input[type=text]:focus {
outline: none;
}
jQuery:
$('input').on('focusin', function() {
$(this).parent().find('label').addClass('active');
});
$('input').on('focusout', function() {
if (!this.value) {
$(this).parent().find('label').removeClass('active');
}
});
I have just used keyup() of jquery. It is basically an event handler to the keyup of javascript event.
$('input').keyup(function(){
$(this).parent().find('label').text($(this).val())
});
Please check in the JSFiddle for any doubts.
Here is a small suggestion for a better UX.
When the input value is empty you can give a small if condition to show its former placeholder. And we can mange that placeholder with the help of an attribute. for e.g here i'm using name to retrieve the placeholder.
Please check in the JSFiddle for any doubts.
Hope this is helpful. Thank you.
Yes, it is possible. Use the following jQuery code as an example for the rest of your inputs.
$("#fname").keyup(function() {
$("label[for='fname']").html($(this).val());
});
Description: You select the ID input (e.g. #fname) for which you want to change the value of the label that moves to top (e.g. label fname) to the value that you are currently typing.
Check the updated JSFiddle here: https://jsfiddle.net/NikolaosG/tyowcgut/3/
Yes, the keyup event is the best way to handle this. But additionally, you use multiple event handlers for each input -- here's an alternate way to handle that scenario. Not that one is better or preferred, simply an option.
$('input').on({
focusin: function() {
$(this).parent().find('label').addClass('active');
},
focusout: function() {
if (!this.value) {
$(this).parent().find('label')
.removeClass('active');
}
},
keyup: function() {
var newText = $(this).val();
$(this).parent().find('label').text(newText);
}
});
body {
font-family: 'Lato', sans-serif;
color: black;
background-color: white;
}
h1 {
font-size: 60px;
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
color: #999;
}
div.wrap {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
div.wrap div {
position: relative;
margin: 50px 0;
}
label {
position: absolute;
top: 0;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: white;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 100%;
padding: 20px;
border: 2px solid black;
font-size: 20px;
background-color: white;
color: black;
}
input[type=text]:focus {
outline: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="wrap">
<div>
<label for="fname">First Name</label>
<input id="fname" type="text" class="cool" />
</div>
<div>
<label for="lname">Last Name</label>
<input id="lname" type="text" class="cool" />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" class="cool" />
</div>
</div>
Hi am adding toggle buttons dynamically when click on a button. But after adding I clicked on one button it is working fine after clicking other button then it will effecting first one only.
please help me!
HTML code:
<div id='test'>
<button onclick="myFunction()">
Add toggle button
</button>
</div>
CSS code:
#switchdiv
{
clear: both;
margin:1px;
}
input.switch:empty
{
margin-left: -999px;
}
input.switch:empty ~ label
{
position: relative;
float: left;
line-height: 1.6em;
text-indent: 4em;
margin: 0.2em 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.switch:empty ~ label:before,
input.switch:empty ~ label:after
{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: ' ';
width: 3.6em;
background-color: #c33;
border-radius: 0.3em;
box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
input.switch:empty ~ label:after
{
width: 1.4em;
top: 0.1em;
bottom: 0.1em;
margin-left: 0.1em;
background-color: #fff;
border-radius: 0.15em;
box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}
input.switch:checked ~ label:before
{
background-color: #393;
}
input.switch:checked ~ label:after
{
margin-left: 2.1em;
}
javaScript code:
$('button').click(function() {
var element = $('#test');
var toggle_button = '<div id="switchdiv">\
<input type="checkbox" id="switch1" name="switch1" class="switch" visible="false"/>\
<label for="switch1">first switch</label>\
</div>';
element.append(toggle_button);
});
The problem was, your generated input had the same id, so all i did is declaring a id variable that will be incremented on every click, I then used it in your input and label. I changed only your javascript, everything else is still the same.
var id = 0;
$('button').click(function() {
var element = $('#test');
var toggle_button = '<div id="switchdiv">\
<input type="checkbox" id="switch' + id + '" name="switch' + id + '" class="switch" visible="false"/>\
<label for="switch' + id + '">first switch</label>\
</div>';
element.append(toggle_button);
id++;
});
#switchdiv
{
clear: both;
margin:1px;
}
input.switch:empty
{
margin-left: -999px;
}
input.switch:empty ~ label
{
position: relative;
float: left;
line-height: 1.6em;
text-indent: 4em;
margin: 0.2em 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.switch:empty ~ label:before,
input.switch:empty ~ label:after
{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: ' ';
width: 3.6em;
background-color: #c33;
border-radius: 0.3em;
box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
input.switch:empty ~ label:after
{
width: 1.4em;
top: 0.1em;
bottom: 0.1em;
margin-left: 0.1em;
background-color: #fff;
border-radius: 0.15em;
box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}
input.switch:checked ~ label:before
{
background-color: #393;
}
input.switch:checked ~ label:after
{
margin-left: 2.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id='test'>
<button onclick="myFunction()">
Add toggle button
</button>
</div>
You have written click event two times for the same button. One in onclick="myFunction()" and the other one is
$('button').click(function() {
});
So, correct that.
The problem here is with ID selector, Add the below code and try.
var id = 0;
$('button').click(function() {
var element = $('#test');
var toggle_button = '<div id="switchdiv">\
<input type="checkbox" id="switch1'+id+'" name="switch1" class="switch" visible="false"/>\
<label for="switch1'+id+'">first switch</label>\
</div>';
element.append(toggle_button);
id++
});