Jquery Mobile - Checkbox usage

This example demonstrates how the regular checkbox can be styled using JQM and the various data-roles that can be used along with it.

by Akram kamal

HTML

<div data-role="page">
    <div data-role="content">
        <form>
            <input type="checkbox" name="checkbox-option" id="checkbox-option1" value="checkbox1" checked />
            <label for="checkbox-option1">Jquery Mobile</label>
            <input type="checkbox" name="checkbox-option" id="checkbox-option2" value="checkbox2" />
            <label for="checkbox-option2">The M Project</label>
            <input type="checkbox" name="checkbox-option" id="checkbox-option3" value="checkbox3" />
            <label for="checkbox-option3">Sencha Touch</label>
        </form>
        <form>
            <fieldset data-role="controlgroup">
                <legend>Choose frameworks:</legend>
                <input type="checkbox" name="checkbox-option" id="checkbox-option1" value="checkbox1" checked />
                <label for="checkbox-option1">Jquery Mobile</label>
                <input type="checkbox" name="checkbox-option" id="checkbox-option2" value="checkbox2" />
                <label for="checkbox-option2">The M Project</label>
                <input type="checkbox" name="checkbox-option" id="checkbox-option3" value="checkbox3" />
                <label for="checkbox-option3">Sencha Touch</label>
            </fieldset>
        </form>
        <form>
            <fieldset data-role="controlgroup" data-mini="true">
                <legend>Choose frameworks:</legend>
                <input type="checkbox" name="checkbox-option" id="checkbox-option1" value="checkbox1" checked />
                <label for="checkbox-option1">Jquery Mobile</label>
                <input type="checkbox" name="checkbox-option" id="checkbox-option2" value="checkbox2" />
                <label for="checkbox-option2">The M Project</label>
                <input type="checkbox" name="checkbox-option" id="checkbox-option3" value="checkbox3" />
                <label for="checkbox-option3">Sencha Touch</label>
            </fieldset>
        </form>
        <form>
            <div...