JSFiddle - React, Tailwind, and code Playground

HTML

<html>


<body>

<div class="checkbox">
<label >
    <input type="checkbox"  data-value="1">
</label>
<label >
    <input type="checkbox"  data-value="2">
</label>
<label >
    <input type="checkbox" data-value="3">
</label>
</div>

<div class="filter-results">
       <div class="result-1" data-id="1" style="display: none;">
            <span class="del" data-id="1">X</span> Test1
        </div>
       <div class="result-2" data-id="2" style="display:none;">
            <span class="del" data-id="2">X</span> Test2
        </div>
       <div class="result-3" data-id="3" style="display:none;">
             <span class="del" data-id="3">X</span> Test3
        </div>
</div>

</body>

</html>

JavaScript

// regelt das Toogle, wenn man auf die Checkbox klickt
$('input[type="checkbox"]').click(function(){
    var inputValue = $(this).attr("data-value");
    $(".result-" + inputValue).toggle($(this).prop("checked"));
});
// Bei klick auf das X, soll auch die Checkbox unchecked werden
$('.del').click(function(){
    var inputValue = $(this).attr("data-id");
    $(".result-" + inputValue).toggle(false);
    $("input[type='checkbox'][data-value='"+inputValue+"']").prop("checked",false);
});