質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

903閲覧

チェックボックスを複数使って表示非表示をリアルタイムで切り替える

退会済みユーザー

退会済みユーザー

総合スコア0

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/09/11 04:26

編集2019/09/11 05:09

Javascript初心者です

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/09/11 04:52

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

2019/09/11 04:52

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

回答1

0

ベストアンサー

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

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

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

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

投稿2019/09/11 04:37

編集2019/09/11 05:02
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/09/11 04:48

早急な指摘ありがとうございます 指摘していただいた箇所を修正いたしました
yambejp

2019/09/11 05:03

sampleつけておきました 動作を確認してみてください
yambejp

2019/09/11 05:06

ちなみに・・・ ・水に棲んでる、陸に棲んでる ・哺乳類、爬虫類 は共に排他的な処理になるのですべてのチェックボックスが並列に and検索をする中ではあまり有効なUIではありません。 たとえば哺乳類をチェックすると爬虫類のチェックがはずれるとか 何らかのユーザー補助機能があったほうがよいでしょう
退会済みユーザー

退会済みユーザー

2019/09/11 05:17

お力添え大変助かりました 排他的な項目は重複しないようやってみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問