JSFiddle - React, Tailwind, and code Playground

HTML

<input id="masterbox3" class="master3" type="checkbox" value="3" name="id_categ[]">
<label class="master"><strong>master3</strong></label>
<div class="slaves">
<input class="slave3" type="checkbox" value="31" name="id_spec[]"><label class="slave">slave3_1</label>
<input class="slave3" type="checkbox" value="32" name="id_spec[]"><label class="slave">slave3_2</label>
<input class="slave3" type="checkbox" value="33" name="id_spec[]"><label class="slave">slave3_3</label>
<input class="slave3" type="checkbox" value="34" name="id_spec[]"><label class="slave">slave3_4</label>
<input class="slave3" type="checkbox" value="35" name="id_spec[]"><label class="slave">slave3_5</label>
<div class="clear"> </div></div>

CSS

.clear{
	float:none;
	clear:both;
}
input, label{
	float:left;
}
input{
	clear:left;
}
.master{
    font-weight:bold;
    font-size:20px;
}

JavaScript

$(document.body).on('click','input[type="checkbox"][class^="master"]',function(){
  var slaves = $(this).next('label').next('div.slaves').find('input[type="checkbox"][class*="slave"]');
  var master = $(this);
  $(slaves).attr('checked', $(this).is(':checked'));
});