jQuery Mobile: All Checkboxes

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

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

Here I put them all in a page.

All Checkboxes
<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>Checkbox App</h1></div>
    <br>
    <p>Basic Check Box</p>
    <form>
        <label>
            <input type='checkbox' name='checkbox-0 '>Check me
        </label>
    </form>
<br>
    <p>Mini Size Check Box</p>
    <form>
        <input type='checkbox' name='checkbox-mini-0' id='checkbox-mini-0' data-mini='true'>
        <label for='checkbox-mini-0'>I agree</label>
    </form>
    <br>
    <p>Vertical Group Check Box</p>
    <form>
        <fieldset data-role='controlgroup'>
            <input type='checkbox' name='checkbox-v-2a' id='checkbox-v-2a'>
            <label for='checkbox-v-2a'>One</label>
            <input type='checkbox' name='checkbox-v-2b' id='checkbox-v-2b'>
            <label for='checkbox-v-2b'>Two</label>
            <input type='checkbox' name='checkbox-v-2c' id='checkbox-v-2c'>
            <label for='checkbox-v-2c'>Three</label>
        </fieldset>
    </form>
    <br>
    <p>Horizontal Group Check Box</p>
    <form>
        <fieldset data-role='controlgroup' data-type='horizontal'>
            <input type='checkbox' name='checkbox-h-2a' id='checkbox-h-2a'>
            <label for='checkbox-h-2a'>One</label>
            <input type='checkbox' name='checkbox-h-2b' id='checkbox-h-2b'>
            <label for='checkbox-h-2b'>Two</label>
            <input type='checkbox' name='checkbox-h-2c' id='checkbox-h-2c'>
            <label for='checkbox-h-2c'>Three</label>
        </fieldset>
    </form>

    <br>
    <p>Icon Position right</p>
    <form>
        <fieldset data-role='controlgroup' data-iconpos='right'>
            <input type='checkbox' name='checkbox-h-6a' id='checkbox-h-6a'>
            <label for='checkbox-h-6a'>One</label>
            <input type='checkbox' name='checkbox-h-6b' id='checkbox-h-6b'>
            <label for='checkbox-h-6b'>Two</label>
            <input type='checkbox' name='checkbox-h-6c' id='checkbox-h-6c'>
            <label for='checkbox-h-6c'>Three</label>
        </fieldset>
    </form>

    <br>
    <p>Theme B</p>
    <form>
        <fieldset data-role='controlgroup'>
            <input type='checkbox' name='checkbox-t-2a' id='checkbox-t-2a' data-theme='b'>
            <label for='checkbox-t-2a'>One</label>
            <input type='checkbox' name='checkbox-t-2b' id='checkbox-t-2b' data-theme='b'>
            <label for='checkbox-t-2b'>Two</label>
            <input type='checkbox' name='checkbox-t-2c' id='checkbox-t-2c' data-theme='b'>
            <label for='checkbox-t-2c'>Three</label>
        </fieldset>
    </form>

    <br>
    <p>Disabled</p>
    <form>
        <input disabled='' type='checkbox' name='checkbox-t-2d' id='checkbox-t-2d' data-theme='a'>
        <label for='checkbox-t-2d'>One</label>
    </form>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

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 that they are associated.

Series Navigation<< jQuery Mobile: Disabled Checkbox
jQuery Mobile: Basic Radio Buttons >>