data-属性に複数のimputを設定し、それを取得してリストを絞り込む方法 [HTML] [JavaScript]

Question

1. 前提、実現したいこと

国公立/私立 大学の　理系/文系 による学費の違いをプログラミングで表示するシステム(codepen)を作りたいと考えております。
元のhtmlデータはもっと多いですが、質問する際に必要な最低限のコードだけ共有いたします。
ボタンをcheckするごとに表示されるリストがだんだんと少なくなっていき、絞られていくイメージなので、「大学」と「学部」のどちらの項目がcheckされている必要はないです。

プログラミング全くの初心者ですので、

• htmlの記述で対応できるならそちらを優先したい
• JSで記述する必要があるのでしたら、具体的にどの部分をどのように記述すれば良いかを教えて頂きたい

JSに関してはほぼ何もわかっていない状況ですので、このコードを使えば？というアドバイスだけでは解決できないレベルです...

2. 発生している問題

**ひとつのdata-属性に関して、複数のimputのどれがcheckされても良いようなコードを知りたいです。
具体的には、「東京大学」「京都大学」のどちらが押されても、国公立大学の理系/文系の学費が表示されて欲しいです。

3. 自分で試したこと

Excelでいう "①" or "②" or "③" のようにできたらいいなと考えていたので、htmlの記述を

<li class="list_item" 
      data-university="tokyo"
      data-university="kyoto"
      data-major="science"
      data-major="engineering"
      >

<li class="list_item" 
      data-university='["tokyo","kyoto"]'
      data-major='["science","engineering"]'
      >

このように試してみましたが、うまくいきません。やはりJSで記述する必要があるのでしょうか。

4. コード

一番最初にcodepenのリンクを共有しましたが、一応こちらにもコードを共有しておきます。

変更後

<form>
<ul>
<li>
<label><input type="checkbox" name="university" value="tokyo">東京大学</label></li>
<li><label><input type="checkbox" name="university" value="kyoto">京都大学</label></li>
<li><label><input type="checkbox" name="university" value="keio">慶應大学</label></li>
<li><label><input type="checkbox" name="university" value="waseda">早稲田大学</label></li>
</ul>
<hr>
<ul>
<li><label><input type="checkbox" name="major" value="science">理学部</label></li>
<li><label><input type="checkbox" name="major" value="engineering">工学部</label></li>
<li><label><input type="checkbox" name="major" value="letters">文学部</label></li>
<li><label><input type="checkbox" name="major" value="law">法学部</label></li>
</ul>
<hr>
<ul>
<li><label><input type="checkbox" name="graduate" value="goSame">院進(同大学)</label></li>
<li><label><input type="checkbox" name="graduate" value="goDiffe">院進(他大学)</label></li>
<li><label><input type="checkbox" name="graduate" value="work">就職</label></li>
<li><label><input type="checkbox" name="graduate" value="establish">起業</label></li>
<hr>
<ul class="list">
  <li class="list_item" 
    data-university='["tokyo","kyoto"]' 
    data-major='["science","engineering"]'
    data-graduate='["goSame","goDiffe"]'
    >国公立理系院進学費: xx万円
  </li>
  <li class="list_item" 
    data-university='["tokyo","kyoto"]' 
    data-major='["science","engineering"]'
    data-graduate='["work","establish"]'
    >国公立理系就職学費: xx万円
  </li>
  <li class="list_item" 
    data-university='["tokyo","kyoto"]' 
    data-major='["letters","law"]'
    data-graduate='["goSame","goDiffe"]'
    >国公立文系院進学費: xx万円
  </li>
  <li class="list_item" 
    data-university='["tokyo","kyoto"]' 
    data-major='["letters","law"]'
    data-graduate='["work","establish"]'
    >国公立文系就職学費: xx万円
  </li>
  <li class="list_item" 
    data-university='["keio","waseda"]' 
    data-major='["science","engineering"]'
    data-graduate='["goSame","goDiffe"]'
    >私立理系院進学費: xx万円
  </li>
  <li class="list_item" 
    data-university='["keio","waseda"]' 
    data-major='["science","engineering"]'
    data-graduate='["work","establish"]'
    >私立理系就職学費: xx万円
  </li>
  <li class="list_item" 
  data-university='["keio","waseda"]' 
  data-major='["letters","law"]'
  data-graduate='["goSame","goDiffe"]'
  >私立文系院進学費: xx万円
  </li>
  <li class="list_item" 
  data-university='["keio","waseda"]' 
  data-major='["letters","law"]'
  data-graduate='["work",establish]'
  >私立文系就職学費: xx万円
  </li>
</ul>

document.addEventListener('change',e=>{
  const t=e.target;
  if(t.closest('[name=university],[name=major]')){
    const univ=[...document.querySelectorAll('[name=university]:checked')].map(x=>x.value);
    const majo=[...document.querySelectorAll('[name=major]:checked')].map(x=>x.value);
    document.querySelectorAll('.list_item').forEach(x=>{
      let flg=false;
      if(univ.length>0 || majo.length>0){
        flg=true && 
            (univ.length==0 || JSON.parse(x.dataset.university).filter(y=>univ.indexOf(y)>=0).length) &&
            (majo.length==0 || JSON.parse(x.dataset.major).filter(y=>majo.indexOf(y)>=0).length)
      }
      x.toggleAttribute('hidden',!flg);
    });
  }
});
window.addEventListener('DOMContentLoaded', ()=>{
  const e = new CustomEvent("HTMLEvents");
  e.initEvent('change', true, true );
  document.querySelector('[name=univerdocument.addEventListener('change',e=>{
  const t=e.target;
  if(t.closest('[name=university],[name=major],[name=graduate]')){
    const univ=[...document.querySelectorAll('[name=university]:checked')].map(x=>x.value);
    const majo=[...document.querySelectorAll('[name=major]:checked')].map(x=>x.value);
    const grad=[...document.querySelectorAll('[name=graduate]:checked')].map(x=>x.value);
    document.querySelectorAll('.list_item').forEach(x=>{
      let flg=false;
      if(univ.length>0 || majo.length>0 || grad.length>0){
        flg=true && 
            (univ.length==0 || JSON.parse(x.dataset.university).filter(y=>univ.indexOf(y)>=0).length) &&
            (majo.length==0 || JSON.parse(x.dataset.major).filter(y=>majo.indexOf(y)>=0).length) &&
            (grad.length==0 || JSON.parse(x.dataset.graduate).filter(y=>grad.indexOf(y)>=0).length)
      }
      x.toggleAttribute('hidden',!flg);
    });
  }
});
window.addEventListener('DOMContentLoaded', ()=>{
  const e = new CustomEvent("HTMLEvents");
  e.initEvent('change', true, true );
  document.querySelector('[name=university]').dispatchEvent(e);
});sity]').dispatchEvent(e);
});

Answer 1

jQueryならこんな感じ

<script>
$(function(){
  $('.university').on('change',function(){
    var vals=$('.university:checked').map(function(){
      return $(this).val();
    }).get();
    $('.list_item').hide().filter(function(){
      var flg=$(this).data('university').filter(function(x){
        return vals.indexOf(x)>=0;
      }).length;
      return flg;
    }).show();
  }).eq(0).trigger('change');
});
</script>
<label><input type="checkbox" class="university" value="tokyo">東京</lavel>
<label><input type="checkbox" class="university" value="kyoto">京都</lavel>
<label><input type="checkbox" class="university" value="osaka">大阪</lavel>
<ul>
<li class="list_item" data-university='["tokyo"]'>東京</li>
<li class="list_item" data-university='["kyoto"]'>京都</li>
<li class="list_item" data-university='["osaka"]'>大阪</li>
<li class="list_item" data-university='["tokyo","kyoto"]'>東京,京都</li>
<li class="list_item" data-university='["kyoto","osaka"]'>京都,大阪</li>
<li class="list_item" data-university='["tokyo","osaka"]'>東京,大阪</li>
<li class="list_item" data-university='["tokyo","kyoto","osaka"]'>東京,京都,大阪</li>
</ul>

生のjsならこう？

<script>
document.addEventListener('change',e=>{
  const t=e.target;
  if(t.closest('.university')){
    const vals=[...document.querySelectorAll('.university:checked')].map(x=>x.value);
    document.querySelectorAll('.list_item').forEach(x=>{
      const flg=JSON.parse(x.dataset.university).filter(y=>vals.indexOf(y)>=0).length;
      x.toggleAttribute('hidden',!flg);
    });
  }
});
window.addEventListener('DOMContentLoaded', ()=>{
  const e = new CustomEvent("HTMLEvents");
  e.initEvent('change', true, true );
  document.querySelector('.university').dispatchEvent(e);
});
</script>
<label><input type="checkbox" class="university" value="tokyo">東京</lavel>
<label><input type="checkbox" class="university" value="kyoto">京都</lavel>
<label><input type="checkbox" class="university" value="osaka">大阪</lavel>
<ul>
<li class="list_item" data-university='["tokyo"]'>東京</li>
<li class="list_item" data-university='["kyoto"]'>京都</li>
<li class="list_item" data-university='["osaka"]'>大阪</li>
<li class="list_item" data-university='["tokyo","kyoto"]'>東京,京都</li>
<li class="list_item" data-university='["kyoto","osaka"]'>京都,大阪</li>
<li class="list_item" data-university='["tokyo","osaka"]'>東京,大阪</li>
<li class="list_item" data-university='["tokyo","kyoto","osaka"]'>東京,京都,大阪</li>
</ul>

３つ以上

（条件が２つある場合は省略）
datasetの要素をリストで宣言してしまえばいくつでもいけそうです

<script>
document.addEventListener('change',e=>{
  const t=e.target;
  const list=["university","major","graduate"];
  if(t.closest(list.map(x=>`[name=${x}]`).join(','))){
    const selected={};
    list.forEach(x=>selected[x]=[...document.querySelectorAll(`[name=${x}]:checked`)].map(x=>x.value));
    document.querySelectorAll('.list_item').forEach(x=>{
      let flg=false;
      if(Object.values(selected).flat().length>0){
        flg=list.map(y=>selected[y].length==0||JSON.parse(x.dataset[y]).filter(z=>selected[y].indexOf(z)>=0).length).reduce((x,y)=>x&&y);
      }
      x.toggleAttribute('hidden',!flg);
    });
  }
});
window.addEventListener('DOMContentLoaded', ()=>{
  const e = new CustomEvent("HTMLEvents");
  e.initEvent('change', true, true );
  document.querySelector('[name=university]').dispatchEvent(e);
});
</script>
<form>
<ul>
<li>
<label><input type="checkbox" name="university" value="tokyo">東京大学</label></li>
<li><label><input type="checkbox" name="university" value="kyoto">京都大学</label></li>
<li><label><input type="checkbox" name="university" value="keio">慶應大学</label></li>
<li><label><input type="checkbox" name="university" value="waseda">早稲田大学</label></li>
</ul>
<hr>
<ul>
<li><label><input type="checkbox" name="major" value="science">理学部</label></li>
<li><label><input type="checkbox" name="major" value="engineering">工学部</label></li>
<li><label><input type="checkbox" name="major" value="letters">文学部</label></li>
<li><label><input type="checkbox" name="major" value="law">法学部</label></li>
</ul>
<hr>
<ul>
<li><label><input type="checkbox" name="graduate" value="goSame">院進(同大学)</label></li>
<li><label><input type="checkbox" name="graduate" value="goDiffe">院進(他大学)</label></li>
<li><label><input type="checkbox" name="graduate" value="work">就職</label></li>
<li><label><input type="checkbox" name="graduate" value="establish">起業</label></li>
<hr>
<ul class="list">
  <li class="list_item" 
    data-university='["tokyo","kyoto"]' 
    data-major='["science","engineering"]'
    data-graduate='["goSame","goDiffe"]'
    >国公立理系院進学費: xx万円
  </li>
  <li class="list_item" 
    data-university='["tokyo","kyoto"]' 
    data-major='["science","engineering"]'
    data-graduate='["work","establish"]'
    >国公立理系就職学費: xx万円
  </li>
  <li class="list_item" 
    data-university='["tokyo","kyoto"]' 
    data-major='["letters","law"]'
    data-graduate='["goSame","goDiffe"]'
    >国公立文系院進学費: xx万円
  </li>
  <li class="list_item" 
    data-university='["tokyo","kyoto"]' 
    data-major='["letters","law"]'
    data-graduate='["work","establish"]'
    >国公立文系就職学費: xx万円
  </li>
  <li class="list_item" 
    data-university='["keio","waseda"]' 
    data-major='["science","engineering"]'
    data-graduate='["goSame","goDiffe"]'
    >私立理系院進学費: xx万円
  </li>
  <li class="list_item" 
    data-university='["keio","waseda"]' 
    data-major='["science","engineering"]'
    data-graduate='["work","establish"]'
    >私立理系就職学費: xx万円
  </li>
  <li class="list_item" 
  data-university='["keio","waseda"]' 
  data-major='["letters","law"]'
  data-graduate='["goSame","goDiffe"]'
  >私立文系院進学費: xx万円
  </li>
  <li class="list_item" 
  data-university='["keio","waseda"]' 
  data-major='["letters","law"]'
  data-graduate='["work","establish"]'
  >私立文系就職学費: xx万円
  </li>
</ul>

Comments

[maniandmani]

ご丁寧にありがとうございます。
プログラミングについてまだ未熟ですので、初歩的な質問を多くしてしまうかもしれません。

①「生のJS」という表現がありましたが、生ではないものとの違いは何でしょうか。
② javascriptの中にhtmlのような記述がありますが、このコードをhtmlに貼れば良いのかあ、javascriptに貼れば良いのか
③ 教えていただいたコードは、それ単体で機能するものでしょうか、それとも私の書いていたjavascriptと組み合わせて機能するものでしょうか。もし、組み合わせて機能するものでしたら、どこの部分を削除して、その代わりにペーストすれば良いか教えて頂きたいです。

[yambejp]

jQueryはライブラリです。
ご質問の中に「$(function() {」的な表現があったためjQueryを使用している前提で
前半の回答はしてあります。
jQueryを使用しなくても動作させることは可能なのでその記述が後半部分です

なお今回の回答はフィルタ部分しか記載していませんので
その他の動作との挙動の調整はご自身で調整いただくことになります

それとuniversityとmajorの相関関係をはっきりしたほうがいいでしょう
universityとmajorがor関係にある場合は単純ですが
and関係にある場合たとえばmajorを選択しないでuniversityだけ選択した場合は
すべてのmajorが対象にするかなど判断が付きません

[maniandmani]

①について理解しました！インタネットにあった似たようなシステムのJSを借用しただけでしたので、JQueryが何かなども全く知りませんでした...

JSについてあまりわかっていないのが正直なところですので、もしお時間ありましたら、私のJSの記述のどこの部分を削除して、教えていただいたコードを加えれば良いかについても教えていただけたらありがたいです！！！

説明不足で申し訳ございません。
universityとmajorはand関係です。
そして、majorを選択しないでuniversityだけを選択した場合、全てのmajorが対象で表示されます。
(実は質問用に大学の学費リストのシステムに変更しましたが、実際は違うシステムで、8項目、500リストを準備しているので、ボタンを押していくとどんどんリストが絞り込まれる仕組みにしたいです)

[yambejp]

> 私のJSの記述のどこの部分を削除して、教えていただいたコードを加えれば良いか

ソースを理解していないなら全部入れ替えたほうが早いと思います。
私のサンプルをコピペして動作確認できませんか？

[maniandmani]

yambejpさんのサンプルはきちんと機能しました！ありがとうございます。

ただ、data-universityとdata-majorのどちらもで同じような絞り込みをしたい場合、どのようにJQueryを記述すれば良いのかわかりません....
試しにuniversityのJQueryの記述を複製し、universityの部分をmajorに変えてみましたが、うまくいきません...

また、今回yambejpさんは、例としてdata-属性をuniveristyのみにし、checkboxのlabel for-属性も省略されているので、cssにも紐付けられないようになっています。

htmlとCSSは私が記述したものを使用したいのですが、いただいたJQueryのサンプルを私のできる限りでいじってみましたが、なかなかうまくいきません。

何度もお手数をおかけしますが、このhtmlとCSSに対応したJQueryの記述を教えていただけると幸いです！

[yambejp]

universityとmajorの条件が２つの場合を追記しました

[maniandmani]

ご丁寧にありがとうございます。
二つのdata-属性に対してはできました！
こんなに少ないJQueryの記述できちんと動くなんてすごいですね！

ただ、いただいたコードを応用させて3つのdata-属性に対して同じようなことをしようとすると、うまくいきません... (変更後のhtmlとJQueryを追記しましたので、ご確認ください)

申し訳ございませんが、３つの場合どのように記述すれば良いのか教えていただけると幸いです。何から何まで質問する形となってしまい申し訳ございません...

[yambejp]

３つめってなんでしたっけ？

[maniandmani]

最初にお見せしたコードには入っていなかったのですが、今回「院進」or「就職」を選ぶ項目を追加しました。
この学費検索のシステムは質問用に作ったものですので、元のコードでは、data-属性が7つあります。

[yambejp]

HTMLの参考データがあれば考えてみます。
３つ以上になると７つでもロジックはさほど変わらないと思います

[maniandmani]

ありがとうございます！

[maniandmani]

3つ目の項目を訂正し、「院進(同大学)」「院進(他大学)」のどちらを選択しても院進が、「就職」「起業」のどちらを選択しても「就職」に紐づけられたリストが表示されるようにして頂きたいです！
お時間ある時によろしくお願いいたします。

[yambejp]

まとめてみました。
チェックボックスのname,valueの組み合わせとliのカスタムデータが一致する必要があります
テストデータが少ないので検証が完全にはできてないですがなんとなく動いているようにみえます

[maniandmani]

元の7項目あるプログラミングの方でもできました！
本当にありがとうございました！

あんなにシンプルなJSの記述で動くなんてすごいですね。
これを機にプログラミングに興味が持てました！

Answer 2

がんばれーーーー僕も悩んだことある、やめてけど