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" id="checkAll">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

$("#checkAll").on("click", function(){
    $("input").prop("checked", !$("input").prop("checked"));
});