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

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