JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label for="cb1"><input type="checkbox" id="cb1"/>1</label>
    <label for="cb2"><input type="checkbox" id="cb2"/>2</label>
    <label for="cb3"><input type="checkbox" id="cb3"/>3</label>
    <label for="cb4"><input type="checkbox" id="cb4"/>4</label>
    <label for="cb5"><input type="checkbox" id="cb5"/>5</label>
    <label for="cb5"><input type="checkbox" id="cb6"/>6</label>
    <label for="cb7"><input type="checkbox" id="cb7"/>7</label>
</div>

<p>Click checkbox 1, checkbox 2, 3, 6 and 7 should hide</p>
<p>Click checkbox 2, checkbox 1, 3, 5 should hide</p>

CSS

label {
    display:block;
}

JavaScript

var hideMap = { "1" : [2, 3, 6, 7], "2" : [1, 3, 5] };
    
$('div input:checkbox').click(function() {
    var parent = $(this).closest('div');
    var hideIndex = parent.find('input').index(this) + 1 + "";
    
    if (hideMap[hideIndex]) {
        if(!$(this).prop('checked')) {
            parent.find('label').fadeIn();
        } else {
            $.each(hideMap[hideIndex], function(index, value) {
                parent.find('label:eq(' + (value - 1) + ')').fadeOut();
            });
        }
    }
});