回答編集履歴

コメントを受けて追記

2019/05/11 05:26

投稿

Lhankor_Mhy

スコア36074

test CHANGED Viewed

@@ -149,3 +149,111 @@
 ```
+##### コメントを受けて追記
+```js
+$(function() {
+  $('input[name="catItems[]"]').on('change', function() {
+    var catItems = [];
+    $('input[name="catItems[]"]:checked').each(function() {
+      catItems.push('<li class="tag-item">' + $(this).val() + '<span class="close"></span></li>');
+    });
+    $('ul.tag-list').html(catItems);
+    $('.tag-item').on('click', function(){
+      $(this).remove();
+      var text = $(this).text();
+      $('.list-options input[value=' + text + ']').prop( 'checked', false );
+    });
+  });
+  $('#clear').on('click', function(e) {
+   if($("input:checkbox[name='catItems[]']").prop( 'checked', false )){
+      $("input:checkbox[name='catItems[]']").prop( 'checked', false );
+      $('ul.tag-list').html('');
+    }
+    return false;
+  });
+  $('form').on('submit', function(e){
+    e.preventDefault();
+    $('.list').show();
+    for ( let category of ['sex', 'tanmatsu', 'location'] ){ //カテゴリごとに
+      // チェックされている条件を配列化
+      const categoryItems = Array.from( $(`input[data-category~="${category}"]:checked`), e => e.value );
+      // 何もチェックされていなければスキップ
+      if ( categoryItems.length == 0 ) continue;
+      // チェックされている条件のリストを抜き出すセレクタ
+      const categorySelector = categoryItems.map( item => `div[data-${category}~="${item}"]`).join();
+      // 条件を反転して隠す
+      $(`.list`).not(categorySelector).hide();
+    }
+  });
+});
+```