With default options using checkbox:
Check (Like) |
Uncheck (Like) |
Enable (Like) |
Disable (Like) |
Check (Dislike) |
Uncheck (Dislike) |
Enable (Dislike) |
Disable (Dislike)
$('.checkbox').styly();
<label for="like">Like?</label>
<input id="like" type="checkbox" class="checkbox" />
<label for="dislike">Dislike?</label>
<input id="dislike" type="checkbox" class="checkbox" />
<label for="like">Like?</label>
<input id="like" type="checkbox" class="checkbox" />
<label for="dislike">Dislike?</label>
<input id="dislike" type="checkbox" class="checkbox" />
With default options using radio:
Check (Agree) |
Uncheck (Agree) |
Enable (Agree) |
Disable (Agree) |
Check (Disagree) |
Uncheck (Disagree) |
Enable (Disagree) |
Disable (Dislike)
$('.radio').styly();
<label for="agree">Like</label>
<input id="agree" type="radio" name="agreement" class="radio"/>
<label for="disagree">Unlike</label>
<input id="disagree" type="radio" name="agreement" class="radio"/>
<label for="agree">Like</label>
<input id="agree" type="radio" name="agreement" class="radio"/>
<label for="disagree">Unlike</label>
<input id="disagree" type="radio" name="agreement" class="radio"/>
Unchecking all before check someone:
Check (Digg) |
Uncheck (Digg) |
Enable (Digg) |
Disable (Digg) |
Check (Undigg) |
Uncheck (Undigg) |
Enable (Undigg) |
Disable (Undigg)
$('.digg').styly();
<label for="digg">Digg?</label>
<input id="digg" type="checkbox" class="uncheckall" />
<label for="undigg">Undigg?</label>
<input id="undigg" type="checkbox" class="uncheckall" />
<label for="digg">Digg?</label>
<input id="digg" type="checkbox" class="uncheckall" />
<label for="undigg">Undigg?</label>
<input id="undigg" type="checkbox" class="uncheckall" />
Default options:
trigger: true
Enables trigger the fuctions element like onchange.
uncheckAll: false
Uncheck all checkbox with the same class before an especific check.
Public functions:
$('#like').styly('check', true, false);
Checks or unchecks an element. The third parameter is optionally and trigger or not the element event.
$('#like').styly('enable', true);
Enables or disables an element. You can use class selector '.styly'.
Check All |
Uncheck All |
Enable All |
Disable All