Custom radio buttons and checkboxes.
Creates <span> elements after the radio and/or checkbox inputs.
Events bound to the <input> are bound to the custom radios and checkboxes. Events supported: focus, blur, click and mouseup.
See it in action + some notes!
Examples
<input type="radio" id="green" name="green" value="green"> <label for="green">green</label> <input type="checkbox" name="age" id="ages10-20" value="ages10-20"> <label for="ages10-20">Age(s) 10 - 20</label>
The script is initialized on page load, but if new
<input type="radio" /> or <input type="checkbox" />
are added to the page dynamically. Use the line below:
ML.CustomRadios();
The markup the plugin creates:
<input type="radio" id="green" name="green" value="green" class="styled"> <span class="radio"></span> <label for="green">green</label> <input type="checkbox" name="age" id="ages10-20" value="ages10-20" class="styled"> <span class="checkbox"></span> <label for="ages10-20">Age(s) 10 - 20</label>