JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search">
    <ul id="attribute">
        <li><label class="selected"><input type="checkbox" id="all" class="sort" checked="checked">すべて</label></li>
        <li><label><input type="checkbox" id="attribute01" class="sort">attribute01</label></li>
        <li><label><input type="checkbox" id="attribute02" class="sort">attribute02</label></li>
        <li><label><input type="checkbox" id="attribute03" class="sort">attribute03</label></li>
        <li><label><input type="checkbox" id="attribute04" class="sort">attribute04</label></li>
        <li><label><input type="checkbox" id="attribute05" class="sort">attribute05</label></li>
    </ul>

    <ul id="type">
        <li><label><input type="checkbox" id="type01" class="sort">type01</label></li>
        <li><label><input type="checkbox" id="type02" class="sort">type02</label></li>
        <li><label><input type="checkbox" id="type03" class="sort">type03</label></li>
        <li><label><input type="checkbox" id="type04" class="sort">type04</label></li>
        <li><label><input type="checkbox" id="type05" class="sort">type05</label></li>
        <li><label><input type="checkbox" id="type06" class="sort">type06</label></li>
        <li><label><input type="checkbox" id="type07" class="sort">type07</label></li>
        <li><label><input type="checkbox" id="type08" class="sort">type08</label></li>
    </ul>

    <ul id="option">
        <li><label><input type="checkbox" id="option01" class="sort">option01</label></li>
        <li><label><input type="checkbox" id="option02" class="sort">option02</label></li>
        <li><label><input type="checkbox" id="option03" class="sort">option03</label></li>
        <li><label><input type="checkbox" id="option04" class="sort">option04</label></li>
        <li><label><input type="checkbox" id="option05" class="sort">option05</label></li>
        <li><label><input type="checkbox" id="option06" class="sort">option06</label></li>
        <li><label><input type="checkbox"...

CSS

.active {
	background-color: red;
}

#search {
    overflow: hidden;
}
#search > ul {
    float: left;
}

JavaScript

/*
    https://teratail.com/questions/43374
 */
$( function() {
	$( '#search li label input:not(#all)' ).click( function() {
		var inputkey = [ 'attribute', 'type', 'option' ]
		  , i, l = inputkey.length
		  , $res, $tmp, res = []
		  , $all = $( '#all' );
		  ;
		$tmp = $( '#list > li' ).removeClass( 'active' );
		for ( i = 0; i < l; i++ ) {
			res = []
			$( '#search input[id^="' + inputkey[ i ] + '"]:checked' ).each( function() {
				res.push( $( this )[ 0 ].id );
			} );
			if ( !res.length ) { continue; }
			$tmp = $( '#list > li.' + res.join( ', #list > li.' ) );
			if ( !$res || !$res.length ) {
				$res = $tmp;
			} else if ( $tmp.length ) {
				$res = $res.filter( '.' + res.join( ', .' ) );
			}
		}
		if ( $res && $res.length ) {
			$res.addClass( 'active' );
			$all.prop( 'checked', false );
		} else {
			// No Selected
			res = false;
			$all.prop( 'checked', true );
		}
	} );
	$( '#all' ).click( function() {
		if (  $( this ).prop( 'checked') === true ) {
			$( '#list > li' ).removeClass( 'active' );
			$( '#search input:checked:not(#all)' ).prop( 'checked', false );
		}
	} );
} );