JSFiddle - React, Tailwind, and code Playground

by qichengzx

HTML

<div>
  <div>
    <div class="parent">
      <label><input type="checkbox" value="parent_1"/>店铺名1</label>
    </div>
    <ul>
      <li>
        <label><input class="child" type="checkbox" value="child_1_1"/>商品1-1</label>
      </li>
      <li>
        <label><input class="child" type="checkbox" value="child_1_2"/>商品1-2</label>
      </li>
    </ul>
  </div>

  <div>
    <div class="parent">
      <label><input type="checkbox" value="parent_2"/>店铺名2</label>
    </div>
    <ul>
      <li>
        <label><input class="child" type="checkbox" value="child_2_1"/>商品2-1</label>
      </li>
      <li>
        <label><input class="child" type="checkbox" value="child_2_2"/>商品2-2</label>
      </li>
    </ul>
  </div>

  <div>
    <div class="parent">
      <label><input type="checkbox" value="parent_3"/>店铺名3</label>
    </div>
    <ul>
      <li>
        <label><input class="child" type="checkbox" value="child_3_1"/>商品3-1</label>
      </li>
    </ul>
  </div>
</div>
<div>
  <label><input id="all" type="checkbox" checked=""/>全选</label>
</div>

JavaScript

$(document).on('click','.parent input',function(){
	if($(this).prop('checked')){
  	$(this).parents('.parent').
    siblings('ul').
    find('input').
    prop('checked','checked');
    
		$.each('.child',function(index){
    	if($(this).prop('checked')){
      	
      }
    })
  }
})