Last active
December 21, 2015 23:08
-
-
Save evitolins/6379860 to your computer and use it in GitHub Desktop.
Checkbox UI using font awesome 4.0 checkbox icons.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Handler for all checkboxes | |
function checkboxHandler(action, checked) { | |
switch (action) { | |
case "test1": | |
console.log("1", action, checked); | |
break; | |
case "test2": | |
console.log("2", action, checked); | |
break; | |
case "test3": | |
console.log("3", action, checked); | |
break; | |
default: | |
console.log(action + " not found", checked); | |
} | |
} | |
// Using native checkboxes | |
$("input").on("change", function() { | |
var $checkbox = $(this), | |
checked = $checkbox.prop("checked"), | |
action = $checkbox.data('action'); | |
// Run Action | |
checkboxHandler.call(undefined, action, checked); | |
}); | |
// Using Sibling Icon as Checkbox | |
$(".ckbx").on("click", function() { | |
var $icon = $(this), | |
$checkbox = $icon.siblings(":checkbox"), | |
checked = !$checkbox.prop("checked"), | |
action; | |
$checkbox.prop("checked", checked); | |
$icon.toggleClass('fa-check-square-o', checked) | |
.toggleClass('fa-square-o', !checked); | |
action = $checkbox.data('action'); | |
// Run Action | |
checkboxHandler.call(undefined, action, checked); | |
}); | |
// As a convenience, hide native checkboxes, when sibling with .ckbx | |
$( document ).ready(function(){$(".ckbx").siblings(":checkbox").hide();}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul> | |
<li><input type="checkbox" data-action='test1' checked><i class="ckbx fa fa-check-square-o"></i></li> | |
<li><input type="checkbox" data-action='test2' checked><i class="ckbx fa fa-check-square-o"></i></li> | |
<li><input type="checkbox" data-action='test3' checked></i>no icon</li> | |
<li><input type="checkbox" data-action='test7' checked> non-existant action</li> | |
<li><input type="checkbox" checked> no action assigned</li> | |
</ul> |
Hey Jordan,
Thanks! Yeah looks cleaner for sure. It's much more logical to be using the actual checkbox for status than the current icon class :P
I will say that .attr() is probably not the best method jQuery 1.6+
Check out this documentation below. There's a blurb specifically mentioning checkbox status:
Gonna tweak my code to this. Thanks for your suggestions!
$(".ckbx")
.click(function() {
$icon = $(this);
$checkbox = $icon.siblings(":checkbox");
checked = !$checkbox.prop("checked");
$checkbox.prop("checked", checked);
$icon.toggleClass('icon-check', checked)
.toggleClass('icon-check-empty', !checked);
// Run Action
// action(checked);
});
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
FWIW:
(Though for accessibility you should make sure the behavior applies to the label, i.e http://jsfiddle.net/jrunning/7kDJm/ )