チェックボックスにJavaScriptのフィルタ機能をつけたい（完全一致）

JSの勉強をはじめたばかりの者です。
知識不足で言葉に不足や誤りがあるかもしれませんが、何卒ご容赦いただけますと幸いです。

カテゴリー名のチェックボックスと、複数のカテゴリー分けしたコンテンツを用意し、
カテゴリー名に複数チェックをした際、チェック項目と完全一致するコンテンツのみをブラウザに表示させるフィルタ機能の実装を勉強しています。

現在下記のように記述をしており、複数チェックをした際、「1つでも一致したらコンテンツが表示される」仕組みなのですが、「チェック項目と完全一致したコンテンツのみを表示」させるためにはどのようにしたらよいでしょうか？ご教授いただけますと幸いです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
    list-style: none;
    padding-left: 0 !important;
}
[data-filter-view]:not([data-filter-view=""]) [data-filter-key] {
    display: none;
}
[data-filter-view][data-filter-view~="#動画"] [data-filter-key~="#動画"], [data-filter-view][data-filter-view~="#写真"] [data-filter-key~="#写真"], [data-filter-view][data-filter-view~="#イラスト"] [data-filter-key~="#イラスト"] {
    display: block;
}
</style>
</head>
<body>
<div class="filter" id="js-filter">
  <ul class="filter-cond">
    <li>
      <label class="check">
        <input type="checkbox" value="#動画">
        #動画</label>
    </li>
    <li>
      <label class="check">
        <input type="checkbox" value="#写真">
        #写真</label>
    </li>
    <li>
      <label class="check">
        <input type="checkbox" value="#イラスト">
        #イラスト</label>
    </li>
  </ul>
  <div class="gallery filter-items"> 
    <!--sample-box-->
    <div class="sample-box" data-filter-key="#動画 #写真">
      <div class="sample-img"> <img src="img/img01.jpg" alt=""> </div>
      <h3 class="sample-ttl">タイトル</h3>
      <dl class="sample-detail">
        <dt>項目</dt>
        <dd>説明文テキスト文テキスト文テキスト文テキスト文テキスト</dd>
        <dt>カテゴリー</dt>
        <dd>#動画 #写真</dd>
      </dl>
    </div>
    
    <!--sample-box-->
    <div class="sample-box" data-filter-key="#動画 #写真 #イラスト">
      <div class="sample-img"> <img src="img/img01.jpg" alt=""> </div>
      <h3 class="sample-ttl">タイトル</h3>
      <dl class="sample-detail">
        <dt>項目</dt>
        <dd>説明文テキスト文テキスト文テキスト文テキスト文テキスト</dd>
        <dt>カテゴリー</dt>
        <dd>#動画 #写真 #イラスト</dd>
      </dl>
    </div>
    
    <!--sample-box-->
    <div class="sample-box" data-filter-key="#写真">
      <div class="sample-img"> <img src="img/img01.jpg" alt=""> </div>
      <h3 class="sample-ttl">タイトル</h3>
      <dl class="sample-detail">
        <dt>項目</dt>
        <dd>説明文テキスト文テキスト文テキスト文テキスト文テキスト</dd>
        <dt>カテゴリー</dt>
        <dd>#写真</dd>
      </dl>
    </div>
    
    <!--sample-box-->
    <div class="sample-box" data-filter-key="#写真 #イラスト">
      <div class="sample-img"> <img src="img/img01.jpg" alt=""> </div>
      <h3 class="sample-ttl">タイトル</h3>
      <dl class="sample-detail">
        <dt>項目</dt>
        <dd>説明文テキスト文テキスト文テキスト文テキスト文テキスト</dd>
        <dt>カテゴリー</dt>
        <dd>#写真 #イラスト</dd>
      </dl>
    </div>
    
    <!--sample-box-->
    <div class="sample-box" data-filter-key="#イラスト">
      <div class="sample-img"> <img src="img/img01.jpg" alt=""> </div>
      <h3 class="sample-ttl">タイトル</h3>
      <dl class="sample-detail">
        <dt>項目</dt>
        <dd>説明文テキスト文テキスト文テキスト文テキスト文テキスト</dd>
        <dt>カテゴリー</dt>
        <dd>#イラスト</dd>
      </dl>
    </div>
  </div>
</div>
<!--/#js-filter--> 

<script>
var widget = document.getElementById('js-filter');
var checkboxes = widget.querySelectorAll('.filter-cond input[type="checkbox"]');
var checkedList = [];
var filter = function () {
    checkedList = [];
    Array.prototype.forEach.call(checkboxes, function (input) {
        if (input.checked) {
            checkedList.push(input.value);
        }
    });
    widget.setAttribute('data-filter-view', checkedList.join(' '));
};

Array.prototype.forEach.call(checkboxes, function (checkbox) {
    checkbox.addEventListener('change', filter);
});
</script>
</body>
</html>