JSFiddle - React, Tailwind, and code Playground

by sousuke ura

HTML

<button type="button" id="allcheck">allcheck</button>
<button type="button" id="allclear">allclear</button>
<form>
    <div id="select">
        <div id="style">
            <input type="checkbox" checked id="shirt"><label class="label" for="shirt">シャツ</label>
            <input type="checkbox" checked id="skirt"><label class="label" for="skirt">スカート</label>
            <input type="checkbox" checked id="another"><label class="label" for="another">その他</label>
        </div>
        <div id="color">
            <input type="checkbox" checked id="white"><label class="label" for="white">ホワイト</label>
            <input type="checkbox" checked id="pink"><label class="label" for="pink">ピンク</label>
            <input type="checkbox" checked id="purple"><label class="label" for="purple">パープル</label>
        </div>
    </div>
</form>
<div class="result">
    <section class="skirt white">skirt white</section>
    <section class="skirt pink">skirt pink</section>
    <section class="skirt purple">skirt purple</section>
    <section class="shirt white">shirt white</section>
    <section class="shirt pink">shirt pink</section>
    <section class="shirt purple">shirt purple</section>
    <section class="another pink">another pink</section>
    <section class="another white">another white</section>
</div>

CSS

section{
  width:100px;
  height:100px;
  margin:1px;
  box-sizing:border-box;
  border:2px solid #ff7;
}
.result{
  display:flex;
  flex-wrap:wrap;
  width:330px;
}
.white{
  background:white;
}
.pink{
  background:pink;
}
.purple{
  background:purple;
}
.skirt{
  box-shadow:0 0 0 10px #77f inset;
}
.shirt{
  box-shadow:0 0 0 10px #7f7 inset;
}
.another{
  box-shadow:0 0 0 10px #f77 inset;
}

JavaScript

$('input').change(function(){
        search();
    });
    
    $('#allcheck').click(function(){
        $('#select input[type="checkbox"]').prop('checked', true);
        search();
    });
    $('#allclear').click(function(){
        $('#select input[type="checkbox"]').prop('checked', false);
        search();
    });
    
    function search(){
        var arraystyle = [''];
        $('#style>input:checked').each(function() {
            arraystyle.push('.'+$(this).attr('id'));
        });
        
        var arraycolor = [''];
        $('#color>input:checked').each(function() {
            arraycolor.push('.'+$(this).attr('id'))
        });
        
        if (arraystyle.length>1) {
            arraystyle.shift();
        }
        if (arraycolor.length>1) {
            arraycolor.shift();
        }
        var search = cartesianProduct([arraystyle,arraycolor]);
        
        $(".result>section").hide();
        search.forEach(function(v,i,ar){
            $(v.join('')).show();
        })
    }
        // 配列の直積をとる
    function cartesianProduct(arr)
    {
        return arr.reduce(function(a,b){
            return a.map(function(x){
                return b.map(function(y){
                    return x.concat(y);
                })
            }).reduce(function(a,b){ return a.concat(b) },[])
        }, [[]])
    }