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><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 filters = [];
    $('input').each(function(){
        var checked = $(this).attr('checked');
        var numberofrooms = $('li[data-bedrooms'+$(this).data('bedrooms')+']');
//        checked ? filters.push(numberofrooms) : null;
        checked ?  numberofrooms.show(): numberofrooms.hide();
    });
/*    $('li').each(function(){
        var listing = $(this);
        if ($.inArray(listing.data('bedrooms'), filters) > -1 || filters.length < 1){
            listing.show('slow');
        } else {
            listing.hide('slow');
        }
    }); */
});