HTMLの属性を追加変更しています。
html
1 <div id="main">
2 <h1>絞込検索</h1>
3 <form>
4 <div class="list-box">
5 <ul class="cat-list">
6 <li>
7 <span class="tl01">性別</span>
8 <ul class="list-options">
9 <li><label><input type="checkbox" name="catItems[]" value="men" data-category="sex">男性</label></li>
10 <li><label><input type="checkbox" name="catItems[]" value="wemen" data-category="sex">女性</label></li>
11 </ul>
12 </li>
13 <li>
14 <span class="tl02">端末</span>
15 <ul class="list-options">
16 <li><label><input type="checkbox" name="catItems[]" value="smart" data-category="tanmatsu">スマホ</label></li>
17 <li><label><input type="checkbox" name="catItems[]" value="pc" data-category="tanmatsu">PC</label></li>
18 <li><label><input type="checkbox" name="catItems[]" value="tablet" data-category="tanmatsu">タブレット</label></li>
19 </ul>
20 </li>
21 <li>
22 <span class="tl03">所在地</span>
23 <ul class="list-options">
24 <li><label><input type="checkbox" name="catItems[]" value="kanto" data-category="location">関東</label></li>
25 <li><label><input type="checkbox" name="catItems[]" value="kansai" data-category="location">関西</label></li>
26 <li><label><input type="checkbox" name="catItems[]" value="hokkaido" data-category="location">北海道</label></li>
27 <li><label><input type="checkbox" name="catItems[]" value="tohoku" data-category="location">東北</label></li>
28 <li><label><input type="checkbox" name="catItems[]" value="kinki" data-category="location">近畿</label></li>
29 </ul>
30 </li>
31 </ul>
32
33 <ul class="tag-list"></ul>
34
35 <ul class="btn-box">
36 <li><div class="clear-box"><a id="clear" class="btn btn-clear">全てを解除</a></div></li>
37 <li><div class="submit-box"><button id="submit" type="submit" class="btn btn-submit">絞り込む</button></div></li>
38 </ul>
39
40 </div><!-- list-box -->
41 </form>
42 </div>
43
44
45<div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto" class="list"> パターン01 </div>
46
47<div data-sex="men " data-tanmatsu="smart tablet" data-location="kanto" class="list"> パターン02 </div>
48
49<div data-sex="men wemen" data-tanmatsu="pc tablet" data-location="kanto" class="list"> パターン03 </div>
50
51<div data-sex="men wemen" data-tanmatsu="smart tablet" data-location="kanto" class="list"> パターン04 </div>
52
53
54<div data-sex="men wemen" data-tanmatsu="smart pc" data-location="kanto" class="list"> パターン05 </div>
55
56<div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto" class="list"> パターン06 </div>
57
58<div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto kansai hokkaido tohoku" class="list"> パターン07 </div>
js
1 $('.list').show();
2 for ( let category of ['sex', 'tanmatsu', 'location'] ){ //カテゴリごとに
3 // チェックされている条件を配列化
4 const categoryItems = Array.from( $(`input[data-category~="${category}"]:checked`), e => e.value );
5 // 何もチェックされていなければスキップ
6 if ( categoryItems.length == 0 ) continue;
7 // チェックされている条件のリストを抜き出すセレクタ
8 const categorySelector = categoryItems.map( item => `div[data-${category}~="${item}"]`).join();
9 // 条件を反転して隠す
10 $(`.list`).not(categorySelector).hide();
11 }
12
コメントを受けて追記
js
1$(function() {
2 $('input[name="catItems[]"]').on('change', function() {
3 var catItems = [];
4 $('input[name="catItems[]"]:checked').each(function() {
5 catItems.push('<li class="tag-item">' + $(this).val() + '<span class="close"></span></li>');
6 });
7
8 $('ul.tag-list').html(catItems);
9
10 $('.tag-item').on('click', function(){
11 $(this).remove();
12
13 var text = $(this).text();
14 $('.list-options input[value=' + text + ']').prop( 'checked', false );
15
16 });
17
18 });
19
20 $('#clear').on('click', function(e) {
21 if($("input:checkbox[name='catItems[]']").prop( 'checked', false )){
22
23 $("input:checkbox[name='catItems[]']").prop( 'checked', false );
24 $('ul.tag-list').html('');
25
26 }
27
28 return false;
29
30 });
31
32 $('form').on('submit', function(e){
33 e.preventDefault();
34
35 $('.list').show();
36 for ( let category of ['sex', 'tanmatsu', 'location'] ){ //カテゴリごとに
37 // チェックされている条件を配列化
38 const categoryItems = Array.from( $(`input[data-category~="${category}"]:checked`), e => e.value );
39 // 何もチェックされていなければスキップ
40 if ( categoryItems.length == 0 ) continue;
41 // チェックされている条件のリストを抜き出すセレクタ
42 const categorySelector = categoryItems.map( item => `div[data-${category}~="${item}"]`).join();
43 // 条件を反転して隠す
44 $(`.list`).not(categorySelector).hide();
45 }
46
47 });
48
49});