jQuery Mobile: Basic Check Box

This entry is part 13 of 73 in the series jQuery Mobile

Checkbox inputs are used to provide a list of options where more than one option can be selected.

We first look at creating a basic checkbox.

<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Basic Check Box</h1></div>
    <p>Basic Check Box</p>
            <input type='checkbox' name='checkbox'>Check me

    <div data-role='footer' data-position='fixed'>
Try The Code
The label tag in HTML5

Label tag is found in HTML5.  This is generally for users using a mouse in the web.

With label, you can also click on the label to make a selection.

So if you click on the label Check me, it is the same as clicking on the checkbox, toggling the selection.

Series Navigation<< jQuery Mobile: Button examples
jQuery Mobile: Mini Size Checkbox >>

Leave a comment

Leave a Reply