JSFiddle - React, Tailwind, and code Playground

HTML

<div class='checkbox_container'>
    <p id='item1'><input type="checkbox" data-connect="2,3,4" /> Chekcbox 1 (hide 2, 3 and 4)</p>
    <p id='item2'><input type="checkbox" id='chk2' data-connect="1" /> <label for='chk2'>Chekcbox 2 (hide 1)</label></p>
    <p id='item3'><input type="checkbox" id='chk3' data-connect="" /> <label for='chk3'>Checkbox 3 (Do nothing)</label></p>
    <p id='item4'><input type="checkbox" id='chk4' data-connect="3,5" /> <label for='chk4'>Chekcbox 4 (hide 3,5)</label></p>
    <p id='item5'><input type="checkbox" id='chk5' data-connect="" /> <label for='chk5'>Chekcbox 5 (Do nothing)</label></p>
</div>

JavaScript

$('input:checkbox','.checkbox_container').click(function() {
   var checked = $(this).prop('checked');
   $.each($(this).data("connect").toString().split(","), function(index, value) { 
       var item = '#item'+value;
        (checked) ? $(item)
            .fadeOut()
            .find("input:checked")
            .removeAttr("checked")
           
         : $(item).fadeIn()  ;
    });
});