JSFiddle - React, Tailwind, and code Playground

by unhw

HTML

<input data-bedrooms="1" type="checkbox">1 bedroom<br>
<input data-bedrooms="2" type="checkbox">2 bedrooms<br>
<input data-bedrooms="3" type="checkbox">3 bedrooms<br>
<br>
<ul>
    <li data-bedrooms="1">1 bedroom apartment</li>
    <li data-bedrooms="1">1 bedroom apartment</li>
    <li data-bedrooms="3">3 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="3">3 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="1">1 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
</ul>

JavaScript

$('input').change(function() {
    var allchecked = 0;
    $('input').each(function() {
        var checked;
        if (checked = $(this).attr('checked')) {
            allchecked++
        };
        var numberofrooms = $('li[data-bedrooms=' + $(this).data('bedrooms') + ']');
        checked ? numberofrooms.show('slow') : numberofrooms.hide('slow');
    });
    if (allchecked == 0) {
        $('li').show('slow');
    }
});