I realize this is really old at this point, but I am working in a really old legacy UI that we are trying to transition to Material design with as minimal impact as possible without a full re-write...

Your snippet works amazing for our need, however, as soon as we move the switches outside of the UL/LI pattern, they break... (no click response) if we toggle values programatically it works as expected... If we copy your template into ours they work fine though... I am at a loss as to what would be missing since there is no JS processing or anything that appears to be needed for this?

Any help would be greatly appreciated, thank you again for the amazingly simple MD switches :)

And now I feel like an idiot, when I modified the HTML for our templating system I included the name attribute but not the id attributes (which the for attribute is keyed to)... Sorry for the noise!

If the html is fixed it works, but if I inject html asynchronously (li elements to the ul) it does nothing, any idea why? Thanks in advance.

What do i do to keep the toggle on/checked on page load. Like if an option is yes/selected i want the switch in on position when the page loads and off if its not selected.

You have to set the "checked" property on the input.

very nice , thanks.

Not Working Please Help me

<script>
$('body').on('click','.chk',function(event) {
var flag;
if(this.checked)
{
var stt=confirm("Are You sure you want to perform this action??");
if(stt)
{
$(this).attr("checked",true);
flag=1;
}
else
{
$(this).removeAttr("checked");
}
}
else
{
var stt=confirm("Are You sure you want to perform this action??");
if(stt)
{
$(this).removeAttr("checked");
flag=0;
}
else
{
$(function(e){
//e.preventDefault();
e.stopPropagation();
$('.toggle:after').css('left','15px');
//$(this).attr("checked",true);
$(this).is(':checked')
});

}
}
});
</script>

<label>
<input type="checkbox" class="chk" checked=""/>

</label>

console.log( $(obj).prop('checked') );

Is there any way to "uncheck" the switches when one is "checked"? Example: When Default is checked, I want to "uncheck" all the others.

Any extra Libraries should be included to make it work??

I'm trying to get the value of this checkbox using jQuery
$('#someSwitchOptionPrimary').val()
But this code ALWAYS return me value 'on'... so I wonder what's going on and have anybody else also seen this problem?

$('#someSwitchOptionPrimary').is(':checked')

This totally works. Thanks a lot!

Yeah, sorry for the short reply, I was working and didn't have time to explain. Glad you got it working.

I have added this in a tabs.
It works with first tab not the other tab

Hey.. This code is great. Can I use this in my project ? What kinda license does this port with ?

the code is perfect!

I like this. Would like to use it in a site where we are pushing the values in to use these in a checklist fashion. However, the input and label are being kicked down a line, they are not lining up with the text in the list-group-item. I just can't work out the issue, would you be able to provide a pointer please?

if you can email (rmcintosh@remabledesigns.com) me I would be happy to help. I am not quite sure what you are trying to do some images of the code and what is happening would be useful. Or access to a demo site would be perfect.

Sorry for the delay. I had it tucked inside a card-block in bs-4 alpha and there was a padding I just kept skipping over.

Great snippet, thanks!

Nice!!

Nice great work, here's another way to create buttons using materials http://www.tutorialspark.co...

How can I get the value for whether checkbox is switched on or off into another page using PHP?

It is just a fancy looking checkbox. You would use the checkbox value of "true" or "false"

yes!! I want to determine the value into next page using PHP.

Assign a name and a value=1 to the input tag.

For example "<input id="someSwitchOptionDanger" name="my_checkbox" value="1" type="checkbox"/>"

Then in the PHP code:

Damn it, no tags:

if($_POST['checkbox'] === 1)
{
// Is checked.
}

Thanks! man

Not really sure what this actually does.

It should turn a checkbox into a toggle like the ones you see on android devices. If you are just seeting a checkbox on the right hand side, what browser are using and what version is that browser

very nice snippet - thanks

Wow, great job. Thanks for sharing!