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%;
}

JavaScript

$('.ui-link').on('click', function () {
    var checkboxes = $('input[type="checkbox"]');
    if (checkboxes[0].checked === true) {
        checkboxes.prop('checked', false);
    } else {
        checkboxes.prop('checked', true);
    }
});