Change the jQuery UI button icon based on the buttons state (i.e. checked/unchecked)

JavaScript

I really enjoy working with jQuery UI, however in some case the UI is not as intuitive.

Here is an example:

Let’s say you have a radio input set where you’re asking your users to select one of the options. If you style radio inputs as buttons with a “check” icon, your buttonset will look something like this by default:

jquery-ui-buttonset

If the user selects one of the options this is what happens.

jquery-ui-buttonset-select

There is a clear difference between checked and unchecked state, however the users don’t know that until they select one of the options. They may simply ignore the selection thinking all options are pre-selected, or they may try to check the one that doesn’t apply.

Better Solution

In some cases it would help to change the icon based on the state of the button. For example, you could use the “close” icon for un-checked state and switch it to “check” icon for the checked state. Click around the example below:

Here is a little code snippet that makes this happen. Please refer to comments for details.

HTML

<div id="better-radio">
		<input type="radio" id="better-radio1" name="better-radio">
        <label for="better-radio1"><span class="ui-icon ui-icon-closethick"></span></label>
		<input type="radio" id="better-radio2" name="better-radio">
        <label for="better-radio2"><span class="ui-icon ui-icon-closethick"></span></label>
		<input type="radio" id="better-radio3" name="better-radio">
        <label for="better-radio3"><span class="ui-icon ui-icon-closethick"></span></label>
	</div>

jQuery Code

$(function() {
//Create button set
$("#better-radio").buttonset();

	//listen for click event on the buttons
	$("#better-radio input[type=radio]").live("click",function(){
		//iterate through each button and switch icons on the checked button
		$("#better-radio input[type=radio]").each(function () {
			//test if button is checked
			if ($(this).attr("checked")) {
				//Depending on the structure of your HTML you may need to change this chain.
				//Since the label is after the input I'm using next() function followed by find() to find and replace the icon
				$(this).next("label").find(".ui-icon").removeClass("ui-icon-closethick").addClass("ui-icon-check");
			}else{

				$(this).next("label").find(".ui-icon").removeClass("ui-icon-check").addClass("ui-icon-closethick");
			}
			//IMPORTANT: you have to use "refresh" to rest the button with the new style.
			$("#better-radio").buttonset("refresh");
		});
	});
});

Here is complete code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI Buttonset</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/flick/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
//Create button set
$("#better-radio").buttonset();

	//listen for click event on the buttons
	$("#better-radio input[type=radio]").live("click",function(){
		//iterate through each button and switch icons on the checked button
		$("#better-radio input[type=radio]").each(function () {
			//test if button is checked
			if ($(this).attr("checked")) {
				//Depending on the structure of your HTML you may need to change this chain.
				//Since the label is after the input I'm using next() function followed by find() to find and replace the icon
				$(this).next("label").find(".ui-icon").removeClass("ui-icon-closethick").addClass("ui-icon-check");
			}else{

				$(this).next("label").find(".ui-icon").removeClass("ui-icon-check").addClass("ui-icon-closethick");
			}
			//IMPORTANT: you have to use "refresh" to rest the button with the new style.
			$("#better-radio").buttonset("refresh");
		});
	});
});
</script>
</head>

<body>
<form>
  <div id="better-radio">
    <input type="radio" id="better-radio1" name="better-radio">
    <label for="better-radio1"><span class="ui-icon ui-icon-closethick"></span></label>
    <input type="radio" id="better-radio2" name="better-radio">
    <label for="better-radio2"><span class="ui-icon ui-icon-closethick"></span></label>
    <input type="radio" id="better-radio3" name="better-radio">
    <label for="better-radio3"><span class="ui-icon ui-icon-closethick"></span></label>
  </div>
</form>
</body>
</html>

 

Related Posts:

1 comments