JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="get">
<div class="monit_block_div2">
<input name="checkbox" type="checkbox" value=""/>
Группа 1
<span class="spoilerCaption2 monithint" style="background-image:none; font-size:10px; font-weight:bold;"> (+)</span>
<div class="spoilerContent2">
<input name="checkbox1" type="checkbox" value=""/>
 Подгруппа 1
<br/>
<input name="checkbox1" type="checkbox" value=""/>
 Подгруппа 1
<br/>
<input name="checkbox1" type="checkbox" value=""/>
 Подгруппа 1
<br/>
<input name="checkbox1" type="checkbox" value=""/>
 Подгруппа 1
</div>
</div>
<div class="monit_block_div2">
<input name="checkbox" type="checkbox" value=""/>
 Группа 2 
<span class="spoilerCaption2 monithint" style="background-image:none; font-size:10px; font-weight:bold;"> (+)</span>
<div class="spoilerContent2">
<input name="checkbox2" type="checkbox" value=""/>
 Подгруппа 2
<br/>
<input name="checkbox2" type="checkbox" value=""/>
 Подгруппа 2
<br/>
<input name="checkbox2" type="checkbox" value=""/>
 Подгруппа 2
<br/>
<input name="checkbox2" type="checkbox" value=""/>
 Подгруппа 2
<br/>
<input name="checkbox2" type="checkbox" value=""/>
 Подгруппа 2    
<br/>
<input name="checkbox2" type="checkbox" value=""/>
 Подгруппа 2
<br/>
<input name="checkbox2" type="checkbox" value=""/>
 Подгруппа 2
</div>
</div>
</form>

JavaScript

$('.monit_block_div2').find('input:checkbox:eq(0)').change(function(){
    $(this).parents('div').eq(0)
        .find('.spoilerContent2 input:checkbox')
        [$(this).attr('checked')?'attr':'removeAttr']
        ('checked','checked');
   
})
    
$('.spoilerContent2 input:checkbox').change(function(){
    $(this).parents('div').eq(1)
        .find('input:checkbox').eq(0)
   [$(this).parents('div').eq(0)
        .find('input:checkbox:checked').length>0
    ?'attr':'removeAttr']
        ('checked','checked')
})