JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href='' data-icon="check">All</a></li>
            </ul>
        </div>
    </div>
    <div data-role="content" id="content">
        <ul data-role="listview" data-theme="c" data-dividertheme="d">
            <li>
                <div class="checkBoxLeft">
                    <input type="checkbox" name="checkbox-0" id="checkbox-0" />
                </div> 
                <a href="#" class="msg">Message 1 </a>
            </li>
            <li>
                <div class="checkBoxLeft">
                    <input type="checkbox" name="checkbox-1" id="checkbox-1" />
                </div> 
                <a href="#" class="msg">Message 2 </a>
            </li>
        </ul>
    </div>
</div>

CSS

.checkBoxLeft {
    position: absolute;
    left: 10px;
    top: 28%;
}
.checkBoxLeft + a {
    padding-left: 45px;
}

JavaScript

$('.ui-navbar .ui-btn').click(function(e) {
    $('#content :checkbox').prop('checked', $(this).toggleClass('ui-btn-active').hasClass('ui-btn-active'));
    e.stopPropagation();
    e.preventDefault();
});