JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id="Categories">
	<input type="checkbox" class="checkbox" name="tv" data-category-tv="tv">тв
	<input type="checkbox" class="checkbox" name="gpon" data-category-gpon="gpon">gpon
	<input type="checkbox" class="checkbox" name="telnum" data-category-telnum="telnum">номер телефона
	<div data-category-tv="tv">есть тв</div>
	<div data-category-gpon="gpon">есть gpon</div>
	<div data-category-telnum="telnum">есть номер телефона</div>
	<div data-category-tv="tv" data-category-gpon="gpon">есть тв и есть gpon</div>
	<div data-category-tv="tv" data-category-gpon="gpon" data-category-telnum="telnum">есть тв и есть gpon и есть номер телефона</div>
	<div data-category-gpon="gpon" data-category-telnum="telnum">есть gpon и есть номер телефона</div>
	<div>есть только интернет</div>
</div>

CSS

input[name="tv"]:checked ~ div:not([data-category-tv="tv"]),
input[name="gpon"]:checked ~ div:not([data-category-tv="gpon"]),
input[name="telnum"]:checked ~ div:not([data-category-tv="telnum"])
{
	display: none;
}

input[name="tv"]:checked ~ div[data-category-tv="tv"],
input[name="gpon"]:checked ~ div[data-category-tv="gpon"],
input[name="telnum"]:checked ~ div[data-category-tv="telnum"]
{
	display: no;
}