JSFiddle - React, Tailwind, and code Playground

by Rajshekar Reddy

HTML

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<form>
    <div class="ui-field-contain">
        <fieldset>
            <div class="ui-input-form">
                <ul class="chk-container">
                <label for="cb-mlb-all">Select all<input type="checkbox" value="" id="cb-mlb-all" /></label>
                <label for="cb-mlb-ar">Arizona<input class="cb-mlb" type="checkbox" value="" id="cb-mlb-ar" /></label>
                <label for="cb-mlb-at">Atlanta<input class="cb-mlb" type="checkbox" value="" id="cb-mlb-at" /></label>
                </ul>
            </div>
        </fieldset>
    </div>
</form>

JavaScript

$(document).ready(function(){ 
        $("#cb-mlb-all").change(function(){
      $(".cb-mlb").prop('checked', $(this).prop("checked"));
      var $labels = $(".cb-mlb").parent().find('label');
        if($(this).prop('checked')){ // toggle the label classes           
          $labels.removeClass('ui-checkbox-off');    
          $labels.addClass('ui-checkbox-on');       
        }
        else{
         $labels.removeClass('ui-checkbox-on');
         $labels.addClass('ui-checkbox-off');    
        }            
    });                 
    });