A rewrite of radio
and checkbox
.
Icon Font is used in uCheck. Please be carefult if your browser don't support Icon Font.
<div class="am-g">
<div class="am-u-sm-6">
<h3>Checkbox</h3>
<label class="am-checkbox needsclick">
<input type="checkbox" value="" data-am-ucheck> Not selected
</label>
<label class="am-checkbox needsclick">
<input type="checkbox" checked="checked" value="" data-am-ucheck checked>
Selected
</label>
<label class="am-checkbox">
<input type="checkbox" value="" data-am-ucheck disabled>
Disabled/Not selected.
</label>
<label class="am-checkbox">
<input type="checkbox" checked="checked" value="" data-am-ucheck disabled
checked>
Disabled/Selected
</label>
</div>
<div class="am-u-sm-6">
<h3>Radio</h3>
<label class="am-radio needsclick">
<input type="radio" name="radio1" value="" data-am-ucheck>
Not selected
</label>
<label class="am-radio needsclick">
<input type="radio" name="radio1" value="" data-am-ucheck checked>
Selected
</label>
<label class="am-radio">
<input type="radio" name="radio2" value="" data-am-ucheck disabled>
Disabled/Not selected
</label>
<label class="am-radio">
<input type="radio" name="radio2" value="" data-am-ucheck checked
disabled>
Disabled/Selected
</label>
</div>
</div>
Default color is the primary color. Add color classes to .am-checkbox
/.am-checkbox
to change color.
.am-secondary
.am-success
.am-warning
.am-danger
<label class="am-checkbox am-secondary">
<input type="checkbox" value="" data-am-ucheck> Not selected
</label>
<label class="am-checkbox am-secondary">
<input type="checkbox" checked="checked" value="" data-am-ucheck checked>
Selected
</label>
<label class="am-radio am-secondary">
<input type="radio" name="radio3" value="" data-am-ucheck> Not selected
</label>
<label class="am-radio am-secondary">
<input type="radio" name="radio3" value="" data-am-ucheck checked> Selected
</label>
<div class="am-form-group">
<h3>Equipments</h3>
<label class="am-checkbox-inline">
<input type="checkbox" value="" data-am-ucheck> iPhone
</label>
<label class="am-checkbox-inline">
<input type="checkbox" value="" data-am-ucheck> iMac
</label>
<label class="am-checkbox-inline">
<input type="checkbox" value="" data-am-ucheck> Macbook
</label>
</div>
<div class="am-form-group">
<h3>Gender</h3>
<label class="am-radio-inline">
<input type="radio" name="radio10" value="male" data-am-ucheck> Male
</label>
<label class="am-radio-inline">
<input type="radio" name="radio10" value="female" data-am-ucheck> Female
</label>
</div>
<form class="am-form" data-am-validator>
<div class="am-form-group">
<h3>Equipment<sup class="am-text-danger">*</sup> (Select 2 options at least, and 4 at most)</h3>
<label class="am-checkbox">
<input type="checkbox" name="cbx" value="ip" data-am-ucheck required minchecked="2" maxchecked="4"> iPhone
</label>
<label class="am-checkbox">
<input type="checkbox" name="cbx" value="im" data-am-ucheck> iMac
</label>
<label class="am-checkbox">
<input type="checkbox" name="cbx" value="mbp" data-am-ucheck> Macbook Pro
</label>
<label class="am-checkbox">
<input type="checkbox" name="cbx" value="sf" data-am-ucheck> Sophie Marceau
</label>
<label class="am-checkbox">
<input type="checkbox" name="cbx" value="sur" data-am-ucheck> Surface
</label>
<label class="am-checkbox">
<input type="checkbox" name="cbx" value="rb" data-am-ucheck> Razer Blade
</label>
</div>
<div class="am-form-group">
<h3>Gender <sup class="am-text-danger">*</sup></h3>
<label class="am-radio">
<input type="radio" name="radio10" value="male" data-am-ucheck required> Male
</label>
<label class="am-radio">
<input type="radio" name="radio10" value="female" data-am-ucheck> Female
</label>
<div>
<div><button type="submit" class="am-btn am-btn-primary">Submit</button></div>
</form>
Add data-am-ucheck
attribute to radio
/checkbox
.
<label class="am-checkbox">
<input type="checkbox" value="" data-am-ucheck> Not selected
</label>
<label class="am-radio">
<input type="radio" value="" data-am-ucheck> Not selected
</label>
$(function() {
$('input[type='checkbox'], input[type='radio']').uCheck();
});
$().uCheck('check')
: Check$().uCheck('uncheck')
: Uncheck$().uCheck('toggle')
: Switch between selected and not selected$().uCheck('disable')
: Disable$().uCheck('enable')
: Enable