Search within TutorialsPark

jQuery Mobile : Checkboxes


Learn how to use jQuery Mobile to create Checkboxes, Radio Buttons and Range Sliders.


jQuery Mobile: Create Checkboxes

jQuery Mobile checkboxes are created using the property type="checkbox" within an input element, with a label describing the input.

Example: jQuery Mobile - Creating CheckBoxes

Give it a TRY! » Note: You can toggle between the checked and unchecked state of checkbox.


jQuery Mobile: Minified Checkbox

In order to create a minified version of the checkbox use the property data-mini="true", for the input, it creates a checkbox with same functionality but in smaller font-size.

Syntax: jQuery Mobile Minified Checkbox

Give it a TRY! » Note: Notice that the checkbox is a few units smaller in font size than standard.


jQuery Mobile: Wrap Around Checkbox

In order to wrap the checkbox in a container use class ui-field-contain, also set the value of attribute data-role="controlgroup" within the element fieldset

Syntax: jQuery Mobile Setting the Placeholder.

Give it a TRY! » Note: Notice that the labels and the form input appear wrapped around like a single unit.


jQuery Mobile: Vertical Checkbox Group

Multiple types of checkbox can be grouped together using the attribute data-role="controlgroup" within the fieldset element.

Grouping removes all margins and padding inbetween the individual buttons, and also except for top and bottom rounded corners rest all rounded corners are removed.

Syntax: jQuery Mobile Vertical Checkbox Group

Give it a TRY! » Note:The Default grouping is Vertical in alignment.


jQuery Mobile: Horizontal Grouped Checkbox

To group the checkbox horizontally, use the property data-type="horizontal" within the element fieldset.

Syntax: jQuery Mobile Horizontally Grouped Checkbox

Give it a TRY! » Note: The label appears grouped inline with the horizontal checkbox.


jQuery Mobile: Grouping Checkboxes

The Demo below shows the application of checkbox groups aligned both horizontally and Vertically, along with a Placeholder and Submit button

Syntax: jQuery Mobile Grouping Checkboxes

Give it a TRY! » Note:Users can use a lot of other widgets as well.


jQuery Mobile: Create Radio Buttons

jQuery Mobile can be used to create radio buttons in similar way as you create checkboxes.

Syntax: jQuery Mobile Create Radio Buttons

Give it a TRY! » Note: The horizontal and vertical groups are created by setting the value of attribute data-type="horizontal/vertical"


jQuery Mobile: Minified Version of Radio Buttons

jQuery Mobile can be used to create input elements with type as range.This input elements is called range slider

Syntax: jQuery Mobile Minified

Give it a TRY! » Note: Use mini version when screen width does not fit the all the form elements.