JSFiddle - React, Tailwind, and code Playground

by magicalex

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>
<ul>
    <li data-bedrooms="1" data-show=">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(){
    $('input').each(function(){
        var checked = $(this).attr('checked') || false;
        var numberofrooms = $(this).data('bedrooms');
        $('li').each(function(){
            if ($(this).data('bedrooms')==numberofrooms){
                checked ? $(this).show() : $(this).hide();
            }
        });
    });
});