Searchable List with checkbox controls

by ilapawar

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
<div data-role="page">
    <div data-role="header">
        <h1>Page Header</h1>
    </div>
    <div data-role="content">
        <a href="#multiSelectDialog" data-role="button" data-rel="dialog">Select</a>
    </div>
</div>
<div id="multiSelectDialog" data-role="page">
    <div data-role="header">
        <h1>Searchable List</h1>
    </div>
    <div data-role="content">
        <ul id="myList" data-role="listview" data-inset="true" data-filter="true">
            <li class="cbli">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <input type="checkbox" name="checkbox-1" id="checkbox-0"/>
                        <label data-iconpos="right" class="cblabel" for="checkbox-0">Alpha</label>
                    </fieldset>
                </div>
            </li>
            <li class="cbli">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <input type="checkbox" name="checkbox-2" id="checkbox-1" />
                <label data-iconpos="right" class="cblabel" for="checkbox-1">Beta</label>
                                    </fieldset>
            </div>
            </li>
            <li class="cbli">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                <input type="checkbox" name="checkbox-3" id="checkbox-2" />
                <label data-iconpos="right" class="cblabel" for="checkbox-2">Gama</label>
                                    </fieldset>
            </div>
            </li>
            <li class="cbli">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                <input type="checkbox" name="checkbox-4"...

CSS

#myList .ui-li {
    padding: 0; /* Remove padding for individual li */
    overflow: hidden; /* Allow ListView's border-radius */
}
#myList .ui-field-contain, #myList .ui-controlgroup{
    margin: 0; /* Remove surrounding space */
}
#myList .ui-checkbox {
    margin: 0; /* Remove surrounding space */
}
#myList .cblabel {
    border: 0; /* Remove default styles applied to checkbox */
    border-radius: 0; /* Remove default styles applied to checkbox */
    /* background: inherit; */ /* This breaks - shows native checkbox */
}
#myList input {
    /*left: -100px; */
}