Checkboxes

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 visual feedback.

To create a checkbox, To add a slider widget to your page, start with an select with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

	
<div data-role="fieldcontain">
	<label for="slider2">Select slider:</label>
	<select name="slider2" id="slider2" data-role="slider">
		<option value="off">Off</option>
			<option value="on">On</option>
		</select> 
</div>

A radiobutton list is displayed like this: