Oh my god. It's full of code!

jQuery UI Checkbox better feedback

Hey all,
This is just a quick snippet for any people out there googling how they can make jQuery UI checkboxes provide better feedback to users. One weakness is that the default checkbox in jQuery UI just looks like a button. It doesn’t really indicate to the user that it is in fact a check box. I was developing an application and watching the end user attempt to use it. They skipped right over the checkbox because they thought it was a button! Even worse, after I told them it was a checkbox, they couldn’t keep track of if it was actually on or off, because the change in style isn’t exactly obvious. So anyway, I knew I needed to somehow give the user more tips that it was in fact an item they can interact with. My fix uses stock UI icons that change based on the checked state to help the user know exactly whats up. Just jam this in the onload portion of your script and the change should be pretty easily apparent.

$( "input[type=checkbox]" ).button({ icons: {primary:'ui-icon-circle-minus'} });
    $( "input[type=checkbox]" ).click(function(){
        if($(this).is(':checked'))
        {
            $(this).next().children('.ui-button-icon-primary').addClass("ui-icon-circle-check").removeClass("ui-icon-circle-minus");
        }
        else
        {
            $(this).next().children('.ui-button-icon-primary').addClass("ui-icon-circle-minus").removeClass("ui-icon-circle-check");
        }
    });

Or for a full example page

<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/redmond/jquery-ui.css" type="text/css" media="all" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>

<script>
$(function() {
    $( "input[type=checkbox]" ).button({ icons: {primary:'ui-icon-circle-minus'} });
    $( "input[type=checkbox]" ).click(function(){
        if($(this).is(':checked'))
        {
            $(this).next().children('.ui-button-icon-primary').addClass("ui-icon-circle-plus").removeClass("ui-icon-circle-minus");
        }
        else
        {
            $(this).next().children('.ui-button-icon-primary').addClass("ui-icon-circle-minus").removeClass("ui-icon-circle-plus");
        }
    });
});
</script>
</head>
<body>
<form name="testForm">

<input type="checkBox" id="myCheckbox"><label for="myCheckbox">Click me Beyatch!</label>

</form>
</body>
</html>

Anyway, hopefully this helps someone. Feel free to of course expand on this example and let me know if you are able to make it more efficient.

One response

  1. fj

    Hi,

    Completely agree with you on this one. Not a huge fan of how the jQuery UI buttons are used as a toggle as it’s not really clear when the state is on or off. I think this is a good compromise … Your solution however 🙂

    – Doesn’t work if the label is before the checkbox
    – Doesn’t handle the start-up state of the checkbox, i.e. if the checkbox is checked the minus icon appears.
    – IMHO the off state should be a X rather than a minus sign as I think convention should be a tick and a cross … purely my opinion.

    Anyway, for anyone else coming across this, and for the author I’ve added the following gist re-factoring the above:

    Hopefully the jQuery UI team we one day modify the button functionality to just be ticks and crosses and we won’t need this work around.

    Hope this helps,
    toepoke.co.uk

    July 22, 2012 at 12:56 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s