Checkbox UI using font awesome 4.0 checkbox icons.

font-awesome-checkbox.js

// 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();});

gistfile1.html

<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>

FWIW:

$(".ckbx")
  .click(function() {
    $icon     = $(this)
    $checkbox = $icon.siblings(":checkbox")
    checked   = !$checkbox.attr("checked")
    $checkbox.attr("checked", checked)
    $icon.toggleClass('icon-check', checked)
      .toggleClass('icon-check-empty', !checked)
  });

(Though for accessibility you should make sure the behavior applies to the label, i.e http://jsfiddle.net/jrunning/7kDJm/ )

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:

http://api.jquery.com/prop/

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);
});