Check out this site for some on/off switches:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
An issue with this code is that the labels require the "for" attribute and the checkboxes need an ID. This can be tedious when working with multiple checkboxes in a form. I made some alterations to the code (check out the CSS in the fiddle), but I'm curious if anyone knows why the checkbox was originally placed outside the label rather than inside? It seems to work just fine when placed within.
Here's the jsfiddle link for reference: http://jsfiddle.net/UJw4F/
<div class="onoffswitch">
<label class="onoffswitch-label">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" checked="checked"/>
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
Another developer also places the checkbox outside the label, like in this example: