JSFiddle - React, Tailwind, and code Playground

by Hiramoto Makiko

HTML

<p><input type="checkbox" id="check1" class="js-toggle-checkbox" data-category="category1"><label for="check1">親チェックボックス</label></p>
<ul class="category1">
  <li><input type="checkbox" id="check1-1"><label for="check1-1">チェックボックス１</label></li>
  <li><input type="checkbox" id="check1-2"><label for="check1-2">チェックボックス２</label></li>
  <li><input type="checkbox" id="check1-3"><label for="check1-3">チェックボックス３</label></li>
</ul>

<p><input type="checkbox" id="check2" class="js-toggle-checkbox" data-category="category2"><label for="check2">親チェックボックス</label></p>
<ul class="category2">
  <li><input type="checkbox" id="check2-1"><label for="check2-1">チェックボックス１</label></li>
  <li><input type="checkbox" id="check2-2"><label for="check2-2">チェックボックス２</label></li>
  <li><input type="checkbox" id="check2-3"><label for="check2-3">チェックボックス３</label></li>
</ul>

JavaScript

function ToggleCheckbox(){
	var $parent = $('.js-toggle-checkbox');
  $parent.change(function(){
  	var bool = $(this).prop('checked');
    var category = $(this).data('category');
    var $targets = $('.'+category);
    $('input',$targets).each(function(){
    	$(this).prop('checked', bool);
    });
  });
}
ToggleCheckbox();