JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div data-role="page" id="p1"> 
    <div data-role="header"><h1>Header Page 1</h1></div> 
        
    <fieldset id="options" data-role="controlgroup" data-type="horizontal"> 
        <input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
<label for="checkbox-0">b</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1"><em>i</em></label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">u</label> 
    </fieldset>
    
    <div  data-role="footer"><h4>Footer</h4></div> 
</div>

JavaScript

$(function(){
    var ts = false;
    $('#p1').delegate('fieldset#options', 'touchstart vmousedown', function(){
        ts = true;
    })

    $('#p1').delegate('fieldset#options', 'touchmove vmousemove', function(event){
     if (ts == true) {
         elem = Math.floor(((event.pageX / $('#options').width() )*100) / (100 / $('#options label').length ))
        $('#checkbox-'+elem).checkboxradio('enable');
        }
    });
        
    $('#p1').delegate('fieldset#options', 'touchend vmouseup', function(){
        ts = false;
    });
});