Michael Gaigg: Über UI/UX Design

29Mar0

jQuery: Handle Dropdown (select), Checkboxes and Radio selections

Posted by Michael Gaigg

Almost daily I work with lists, be it dropdown, checkbox or radio selections. I need to select values, submit selections, hide/show containers depending on the selection etc.

I tend to forget all these cool jQuery notations that make every programmers life easier. How nice would it be to have a little cheat sheet? So I decided to summarize my findings (and share them with you).

Obviously jQuery is powerful and gives you a multitude of possibilities so this list is neither exhaustive nor covers all possible application scenarios. Mix, match, combine and extend the samples as you wish and feel free to post your additional solutions in the comments section.

See the test page.

Dropdown

I'm using the following sample list:

<select id="ddlCategories"> 
   <option>- Select a category -</option>
   <option value="books" selected="selected">Books</option>
   <option value="videos">Videos</option>
   <option value="dvds">DVDs</option>
</select>

Get value of selected item

Pure and simple, despite what you might read in other tutorials:

alert("Selected value: " + $("#ddlCategories").val());

Change text of a particular item

Let's target item with value 'videos':

$("#ddlCategories option[value='videos']").text("Videos and tapes");

Change color of a particular item

This could be useful to show that the category is currently unavailable or a certain item is out of stock.

$("#ddlCategories option[value='videos']").css("color", "#CCC");

Get number of options

Don't forget to subtract options that don't count, e.g. the empty "- Select a category -" option.

alert("Number of options: " + ($("#ddlCategories option").length - 1));

Set a particular option

Set the option 'videos' to be the selected item.

$("#ddlCategories option[value='videos']").attr("selected", "selected");

Checkboxes

Our sample checkbox list:

<div id="chkCategoriesContainer">
	<input type="checkbox" name="chkCategories" value="none" checked="checked" />None<br/>
	<input type="checkbox" name="chkCategories" value="books" />Books<br/>
	<input type="checkbox" name="chkCategories" value="videos" />Videos<br/>
	<input type="checkbox" name="chkCategories" value="dvds" />DVDs<br/>
</div>

Check all items in the checkbox list

This could be invoked e.g. through a link named 'Check all'.

$("input[name='chkCategories']").attr("checked","checked");

Uncheck all items in the checkbox list

Same here, uncheck all, a very common requirement.

$("input[name='chkCategories']").removeAttr("checked");

Make the second item being checked

List is zero-based, so the second item is nth(1) 😉

$("input[name='chkCategories']:nth(1)").attr("checked","checked");

Show the value of each checked item (requires a container!)

In this case we simply alert the value, but we could might as well write it to another output field, container or whatever you may wish.

$('#chkCategoriesContainer :checkbox:checked').each(function() {
	alert($(this).val());
	//$('#outputField').append(', '+$(this).val());
});

Radio

Our sample list again:

<div id="rdoCategoriesContainer">
	<input type="radio" name="rdoCategories" value="none" checked="checked" />None<br/>
	<input type="radio" name="rdoCategories" value="books" />Books<br/>
	<input type="radio" name="rdoCategories" value="videos" />Videos<br/>
	<input type="radio" name="rdoCategories" value="dvds" />DVDs<br/>
</div>

Get value of checked item

alert("Selected value: " + $("input[name='rdoCategories']:checked").val());

Append item to container

The item will be added to the DOM and is available to jQuery immediately.

$('#rdoCategoriesContainer').append('<input type="radio" name="rdoCategories" value="tapes" />Audio tapes<br/>');
23Feb0

Design Guidelines: Radio Buttons versus Checkboxes

Posted by Michael Gaigg

Design guidelines for checkboxes

Design guidelines for checkboxes versus Radio buttons

Users hate formulars, it is work to them. Filling out forms on the web is no different, that's why getting web form design right is difficult, even simple forms can be challenging.

A good start is using the correct form element, or in the words of this blog entry to know when to use Radio Buttons versus Checkboxes:

General Design Guidelines

  1. Use standard visual representations
  2. Visually present groups of choices as groups (e.g. use subheads)
  3. Lay out your lists vertically with one choice per line
  4. Use positive and active wording for checkbox labels
  5. If possible, use radio buttons rather than drop-down menus
  6. Always offer a default selection for radio button lists
  7. Make radio button options comprehensive and clearly distinct
  8. Associate each button/box with a label
  9. Define accesskeys for frequently used checkboxes and radio buttons
  10. Use checkboxes and radio buttons only to change settings, not as action buttons

Radio Buttons

Radio Buttons are used when a list of two or more options is mutually exclusive and the user must select exactly one choice.


<fieldset>
<legend>Gender</legend><br />
<input id="female" type="radio" name="sex" value="female" checked>
<label for="female">Female</label><br />
<input id="male" type="radio" name="sex" value="male">
<label for="male">Male</label><br />
</fieldset>

Checkboxes

Checkboxes are used when a list of options exists where the user may select any number of choices – including zero, one or several.


<fieldset>
<legend>What is your favorite type of salad dressing?</legend><br />
<input id="French" type="checkbox" name="dressing1" value="checkbox">
<label for="French">French</label><br />
<input id="Italian" type="checkbox" name="dressing2" value="checkbox">
<label for="Italian">Italian</label><br />
<input id="Russian" type="checkbox" name="checkbox3" value="checkbox">
<label for="Russian">Blue cheese</label>
</fieldset>

Opt-in Checkbox

A stand-alone checkbox is used for a single option that the user can turn on and off.


<input id="accept" type="checkbox" name="yes" value="checkbox">
<label for="accept">I accept the terms and conditions.</label><br />

References

Suggested reading: