JSFiddle - React, Tailwind, and code Playground

by catfood

HTML

<div class="list-item">
  <div style="margin-left:0px">
    <input type="checkbox" class="foo" id="id_1"> a
  </div>
</div>
<div class="list-item">
  <div style="margin-left:10px">
    <input type="checkbox" class="foo" id="id_2"> b
  </div>
</div>
<div class="list-item">
  <div style="margin-left:20px">
    <input type="checkbox" class="foo" id="id_3"> c
  </div>
</div>

JavaScript

(function($){
    $(document).on("change","input.foo",function(){
        var foos = $("input.foo");
        var prevInput = $(foos).eq($(foos).index(this)-1);
        if($(this).prop("checked")){
            prevInput.attr('checked','checked');
        }else{
            prevInput.removeAttr('checked');
        }
    });
})(jQuery);