Checkboxradio Widget

Categories: Widgets

Checkboxradio Widgetversion added: 1.0

Description: Creates a checkboxradio widget

QuickNavExamples

Options

Methods

Events

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.

The 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. If the input isn’t wrapped in its corresponding label, be sure to set the for attribute of the label to match the id of the input so they are semantically associated.

1
2
3
4
 
<label><input type="checkbox" name="checkbox-0"> I agree </label>
 
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom">
<label for="checkbox-1">I agree</label>

The above snippets will produce two basic checkboxes. The default styles will set the width of the element to 100% of the parent container.

Mini version

For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the element to create a mini version.

1
2
 
<input type="checkbox" name="checkbox-mini" id="checkbox-mini-1" class="custom" data-mini="true">
<label for="checkbox-mini-1">I agree</label>

This will produce a checkbox that is not as tall as the standard version and has a smaller text size.

Field containers & Legends

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.

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

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 fieldset.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Choose as many snacks as you'd like:</legend>
      <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">
      <label for="checkbox-1a">Cheetos</label>
 
      <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom">
      <label for="checkbox-2a">Doritos</label>
 
      <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom">
      <label for="checkbox-3a">Fritos</label>
 
      <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">
      <label for="checkbox-4a">Sun Chips</label>
    </fieldset>
</div>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div data-role="fieldcontain">
  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Font styling:</legend>
    <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom">
    <label for="checkbox-6">b</label>
 
    <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom">
    <label for="checkbox-7"><em>i</em></label>
 
    <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom">
    <label for="checkbox-8">u</label>
  </fieldset>
</div>

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.

Radio buttons

Radio buttons are used to provide a list of options where only a single item can be selected. Traditional desktop radio buttons are not optimized for touch input so jQuery Mobile styles the label for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.

The radio button 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.

Vertically grouped radio buttons

To create a set of radio buttons, add an input with a type="radio" attribute and a corresponding label. Set the for attribute of the label to match the id of the input so they are semantically associated.

The label element is displayed next to the radio form element. Wrap the radio buttons in a fieldset element that has a legend which acts as the title for the question.

To visually integrate multiple radio buttons into a vertically 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 container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<fieldset data-role="controlgroup">
  <legend>Choose a pet:</legend>
  <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
  <label for="radio-choice-1">Cat</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
  <label for="radio-choice-2">Dog</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
  <label for="radio-choice-3">Hamster</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4">
  <label for="radio-choice-4">Lizard</label>
</fieldset>

This will produce a vertically grouped radio button set. The default styles set the width of the button group to 100% of the parent container and stacks the label on a separate line.

Mini version

For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the element to create a mini version.

1
2
3
4
5
6
7
8
9
10
 
<fieldset data-role="controlgroup" data-mini="true">
  <input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" checked="checked">
  <label for="radio-mini-1">Credit</label>
 
  <input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2">
  <label for="radio-mini-2">Debit</label>
 
  <input type="radio" name="radio-mini" id="radio-mini-3" value="choice-3">
  <label for="radio-mini-3">Cash</label>
</fieldset>

This will produce a radio button that is not as tall as the standard version and has a smaller text size.

Field containers

Optionally wrap the radiobuttons in a container with the data-role="fieldcontain" attribute to help visually group it in a longer form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice-1" checked="checked">
    <label for="radio-choice-1">Cat</label>
 
    <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice-2">
    <label for="radio-choice-2">Dog</label>
 
    <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice-3">
    <label for="radio-choice-3">Hamster</label>
 
    <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice-4">
    <label for="radio-choice-4">Lizard</label>
  </fieldset>
</div>

Horizontal radio button sets

Radio buttons can also be used for grouped button sets where only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the data-type="horizontal" to the fieldset.

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

The labels float so they sit side-by-side on a line. The radio button icons are hidden and only the left and right edges of the group are rounded.

Options

mini 

Type: Boolean
Default: false
Sets the size of the element to a more compact, mini version.

This option is also exposed as a data attribute: data-mini="true".

Code examples:

Initialize the checkboxradio with the mini option specified:

1
2
3
 
$( ".selector" ).checkboxradio({
  mini: true
});

Get or set the mini option, after initialization:

1
2
3
4
5
 
// Getter
var mini = $( ".selector" ).checkboxradio( "option", "mini" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "mini", true );

theme 

Type: String
Default: null, inherited from parent
Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set.

Possible values: swatch letter (a-z).

This option is also exposed as a data attribute: data-theme="a".

Code examples:

Initialize the checkboxradio with the theme option specified:

1
2
3
 
$( ".selector" ).checkboxradio({
  theme: "a"
});

Get or set the theme option, after initialization:

1
2
3
4
5
 
// Getter
var theme = $( ".selector" ).checkboxradio( "option", "theme" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "theme", "a" );

Methods

disable()Returns: jQuery (plugin only)

disable a checkboxradio.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

1
 
$( ".selector" ).checkboxradio( "disable" );

enable()Returns: jQuery (plugin only)

enable a disabled checkboxradio.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

1
 
$( ".selector" ).checkboxradio( "enable" );

refresh()Returns: jQuery (plugin only)

update the checkboxradio.

If you manipulate a checkboxradio via JavaScript, you must call the refresh method on it to update the visual styling.

  • This method does not accept any arguments.
Code examples:

Invoke the refresh method after changing the checked property:

1
 
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );

Events

create( event, ui )Type: checkboxradiocreate

triggered when a checkboxradio is created

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the checkboxradio with the create callback specified:

1
2
3
 
$( ".selector" ).checkboxradio({
  create: function( event, ui ) {}
});

Bind an event listener to the checkboxradiocreate event:

1
 
$( ".selector" ).on( "checkboxradiocreate", function( event, ui ) {} );

Examples:

A basic example of a checkbox in a fieldcontainer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>checkboxradio demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div data-role="content">
    <div data-role="fieldcontain">
      <form>
        <fieldset data-role="controlgroup">
          <legend>Agree to the terms:</legend>
          <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom">
          <label for="checkbox-2">I agree</label>
        </fieldset>
      </form>
    </div>
  </div>
</div>
 
</body>
</html>

Demo:

A basic example of vertically grouped radio buttons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>checkboxradio demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div data-role="content">
    <form>
      <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
        <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
        <label for="radio-choice-1">Cat</label>
 
        <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
        <label for="radio-choice-2">Dog</label>
 
        <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
        <label for="radio-choice-3">Hamster</label>
 
        <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4">
        <label for="radio-choice-4">Lizard</label>
      </fieldset>
    </form>
  </div>
</div>
 
</body>
</html>

Demo: