Javascript初心者です

JavascriptとHTMLで非常に簡易な動物図鑑を作りたく種や特性の分類をチェックボックスによる「none block」で行おうと思いついたのですが何をどうすればいいか全くわからず頭を抱えてます

□水に棲んでいる
□陸に棲んでいる
□毛が生えている
□角が生えている
□哺乳類
□爬虫類
すべて表示[ボタン]
ウミガメ
カナヘビ
カメレオン
ヤマネコ
ハダカネズミ
ラッコ
クジラ

この状態で「水に棲んでいる」にチェックを入れると「ウミガメ」「ラッコ」「クジラ」のみ表示され他が非表示になり、そのうえで「哺乳類」にチェックを入れると「ラッコ」「クジラ」のみが表示され他が非表示になり、さらに「毛が生えている」にチェックを入れると「ラッコ」のみ表示されるといったものを作りたいです

m.ts10806

2019/09/11 04:52

「初心者アイコン」を利用してください。またなるべく質問内容は要件のみを記載してください（挨拶やあとがきを書く労力で質問内容を充実してもらったほうが助かるので

m.ts10806

2019/09/11 04:52

また、ご自身が試したこと調べたことを記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

各項目のアンド検索をする場合、「すべてを表示」が意味合いとしてはおかしくなります
絞られた中のすべてを表示するなら「すべてを表示」チェックボックスはつけてもつけなくても同じです
絞られたものを無視してすべてを表示するなら条件チェックボックスと表示に不整合が発生します

すべてを表示をチェックボックスとするのではなく、
「すべてをチェック」「すべてのチェックを外す」という２つのボタンを設定するか

すべてを表示をチェックしたときに他のチェックボックスを非活性にするなど工夫が必要です

sample

クラスとカスタムデータを使ったサンプルです

javascript
1<script>
2const show=selector=>{
3  [].forEach.call(document.querySelectorAll('.cx'),x=>{
4    var flg=selector!="" && [].indexOf.call(document.querySelectorAll(selector),x)==-1;
5    x.style.display=flg?"none":"";
6  });
7}
8window.addEventListener('DOMContentLoaded', ()=>{
9  [].forEach.call(document.querySelectorAll('[data-target^=c]'),x=>{
10    x.addEventListener('change',e=>{
11      var selector=[].map.call(document.querySelectorAll('[data-target^=c]:checked')||[],x=>"."+x.getAttribute('data-target')).join("");
12      show(selector);
13    });
14  });
15  document.querySelector('#allshow').addEventListener('click',e=>{
16    [].forEach.call(document.querySelectorAll('[data-target^=c]'),x=>{
17      x.checked=false;
18    });
19    show('');
20  });
21});
22</script>
23<label><input type="checkbox" data-target="c1">水に棲んでいる</label><br>
24<label><input type="checkbox" data-target="c2">陸に棲んでいる</label><br>
25<label><input type="checkbox" data-target="c3">毛が生えている</label><br>
26<label><input type="checkbox" data-target="c4">角が生えている</label><br>
27<label><input type="checkbox" data-target="c5">哺乳類</label><br>
28<label><input type="checkbox" data-target="c6">爬虫類</label><br>
29<input type="button" id="allshow" value="すべて表示"><br>
30<div class="cx c1 c6">ウミガメ</div>
31<div class="cx c2 c6">カナヘビ</div>
32<div class="cx c2 c6">カメレオン</div>
33<div class="cx c2 c3 c5">ヤマネコ</div>
34<div class="cx c2 c3 c5">ハダカネズミ</div>
35<div class="cx c1 c3 c5">ラッコ</div>
36<div class="cx c1 c5">クジラ</div>
37