Checkboxes

Home

Checkboxes

Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the label for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.

Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible.

To create a single checkbox, add an input with a type="checkbox" attribute and a corresponding label. Set the for attribute of the label to match the ID of the input so they are semantically associated.

Because checkboxes use the label element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a fieldset element that has a legend which acts as the title for the question. Add the data-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.

Lastly, need to wrap the fieldset in a div with data-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.


<div data-role="fieldcontain">
 	<fieldset data-role="controlgroup">
		<legend>Agree to the terms:</legend>
		<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
		<label for="checkbox-1">I agree</label>
    </fieldset>
</div>
Agree to the terms:

Vertically grouped checkboxes

Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a data-role="controlgroup" attribute on the fie.

Choose as many snacks as you'd like:

Horizontal toggle sets

Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the data-type="horizontal" to the fieldset.

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">

The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.

Font styling:

Refreshing a checkbox

If you manipulate a radiobutton via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");