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

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

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

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

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

1195閲覧

ラジオボタン、チェックボックスで選んだものに対応するコンテンツを自動表示させたい

Jige

総合スコア0

checkbox

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

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/09/23 10:15

編集2021/09/23 10:18

前提・実現したいこと

ウェブサイト上でラジオボタンとチェックボックスを用意し、
押したボタンに対応するコンテンツを表示させたいです。

つまりラジオボタンに
① ② ③
があり、
チェックボックスに
A B C D E
がある状態とします。

コンテンツ<あ>はラジオボタンを問わず、Aが選ばれていれば表示、
コンテンツ<い>は①かつ、AもしくはBが選ばれていた場合に表示、
というようなことがしたいです。

発生している問題・エラーメッセージ

①かつAが選ばれている場合は<あ>のような1:1の関係の表示はできるのですが、 どうすれば上記のような複数条件に対応するような表示の仕方ができるのか、 調べてみたのですがよくわからない状況です。 アドバイスいただけますと幸いです。

該当のソースコード

■HTML <div class="search-box mb"> <span class="search-box_title">■ラジオボタン</span><br> <label><input type="radio" name="kind" value="kind01">①</label> <label><input type="radio" name="kind" value="kind02">②</label> <label><input type="radio" name="kind" value="kind03">③</label> </div> <br> <div class="search-box"> <span class="search-box_title">■チェックボックス</span><br> <label><input type="checkbox" name="cat" value="cat01">A</label> <label><input type="checkbox" name="cat" value="cat02">B</label> <label><input type="checkbox" name="cat" value="cat03">C</label> <label><input type="checkbox" name="cat" value="cat04">D</label> <label><input type="checkbox" name="cat" value="cat05">E</label></div> <div class="cat_image_all"> <div class="cat_image" data-kind="kind01" data-cat="cat01"> <a href="XXX"> <img src="YYY" alt=""> <p class="page_title">あ</p> </a> </div> <div class="cat_image" data-kind="kind02" data-cat="cat02"> <a href="XXX"> <img src="YYY" alt=""> <p class="page_title">い</p> </a> </div> ■CSS .search-box_title{ font-weight: bold; } .search-box label { cursor: pointer; display: inline-block; margin-right: 10px; line-height: 16px; } .search-box input[type="radio"] { width: 16px; height: 16px; margin: -2px 5px 0 0; padding: 0; box-sizing: border-box; vertical-align: middle; } .search-box input[type="checkbox"] { width: 16px; height: 16px; margin: -2px 5px 0 0; padding: 0; box-sizing: border-box; vertical-align: middle; } .cat_image_all { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 640px; margin: 3em auto 0; } .cat_image { width: 48%; max-width: 190px; margin: 0 0 2em; } .cat_image.is-hide { display: none; } .cat_image a { display: block; color: #444; } .cat_image a:hover { text-decoration: underline; } ■JavaScript var searchBox = '.search-box'; var searchItem = '.search-box input'; var listItem = '.cat_image'; var hideClass = 'is-hide'; $(function() { $(searchItem).on('change', function() { search_filter(); }); }); function search_filter() { $(listItem).removeClass(hideClass); for (var i = 0; i < $(searchBox).length; i++) { var name = $(searchBox).eq(i).find('input').attr('name'); var searchData = selected_items(name); if(searchData.length === 0 || searchData[0] === '') { continue; } for (var j = 0; j < $(listItem).length; j++) { var itemData = $(listItem).eq(j).data(name); if(searchData.indexOf(itemData) === -1) { $(listItem).eq(j).addClass(hideClass); } } } } function selected_items(name) { var searchData = []; $('input[name=' + name + ']:checked').each(function() { searchData.push($(this).val()); }); return searchData; }

試したこと

ネットで似たようなことをされようとしている人のブログなどを探したのですが見つからず
ここに辿り着きました。

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

guest

回答2

0

javascript

1<style> 2.hide{display:none;} 3</style> 4<script> 5window.addEventListener('DOMContentLoaded', ()=>{ 6 document.querySelectorAll('.cat_image').forEach(x=>x.classList.add('hide')); 7 document.querySelectorAll('[name=kind],[name=cat]').forEach(x=>{ 8 x.addEventListener('change',()=>{ 9 document.querySelectorAll('.cat_image').forEach(y=>{ 10 const k1=y.dataset["kind"]; 11 const k2=k1?document.querySelector(`[name=kind][value=${k1}`).checked:true; 12 const c1=y.dataset["cat"]; 13 const c2=c1?document.querySelector(`[name=cat][value=${c1}`).checked:true; 14 y.classList.toggle('hide',!k2||!c2); 15 console.log([k1,k2,c1,c2]); 16 }); 17 }); 18 }); 19}); 20</script> 21<div class="search-box mb"> 22 <span class="search-box_title">■ラジオボタン</span><br> 23 <label for="k1"><input type="radio" name="kind" value="kind01">kind01</label> 24 <label for="k2"><input type="radio" name="kind" value="kind02">kind02</label> 25 <label for="k3"><input type="radio" name="kind" value="kind03">kind03</label> 26</div> 27<div class="search-box"> 28 <span class="search-box_title">■チェックボックス</span><br> 29 <label for="c1"><input type="checkbox" name="cat" value="cat01">cat1</label> 30 <label for="c2"><input type="checkbox" name="cat" value="cat02">cat2</label> 31 <label for="c3"><input type="checkbox" name="cat" value="cat03">cat3</label> 32 <label for="c4"><input type="checkbox" name="cat" value="cat04">cat4</label> 33 <label for="c5"><input type="checkbox" name="cat" value="cat05">cat5</label> 34</div> 35<div> 36<div class="cat_image" data-kind="kind01"> 37kind01 38</div> 39<div class="cat_image" data-kind="kind01" data-cat="cat01"> 40kind01/cat01 41</div> 42<div class="cat_image" data-kind="kind02" data-cat="cat01"> 43kind02/cat01 44</div> 45<div class="cat_image" data-kind="kind02" data-cat="cat02"> 46kind02/cat02 47</div> 48<div class="cat_image" data-cat="cat02"> 49cat02 50</div> 51</div>

投稿2021/09/24 01:51

編集2021/09/24 01:52
yambejp

総合スコア114307

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

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

0

そやの〜。前提として

  • 変数 kind に、選択されているラジオボタンのvalueが、
  • 変数 cats に、チェックされているチェックボックスのvalueの配列が

入っているとしよか〜。そうすると、

  • ラジオボタンを問わず、Aが選ばれている

ときは

javascript

1cats.includes('cat01')

がtrueだし、

  • ①かつ、AもしくはBが選ばれていた場合

というのは

javascript

1kind === 'kind01' && cats.some(cat => ['cat01', 'cat02'].includes(cat))

がtrueになるゆう感じでいけるやろ思いますわ ➡ サンプル (※ <form> 追加して、ラジオボタンとチェックボックスくくってます。それと「あ」と「い」は簡易なものに差し替えてますぅ)

追記: <form>追加しなくてもできる ➡ サンプル2

追記2:

別案ですぅ〜。

ラジオボタンとチェックボックスのvalue属性として現れる文字列(kind01 から cat05 までの全て)をプロパティとして持ち、その値はチェックされていればtrue、チェックされていなければfalseになっとるゆうオブジェクトを flags として作れば、

  • ラジオボタンを問わず、Aが選ばれている

ときは

javascript

1flags.cat01

がtrueだし、

  • ①かつ、AもしくはBが選ばれていた場合

というのは

javascript

1flags.kind01 && (flags.cat01 || flags.cat02)

がtrueになるということでいけます。

ほんで、こないなflags

javascript

1const flags = [...document.querySelectorAll('input')].reduce( 2 (obj, { value, checked }) => ({ ...obj, [value]: checked }), {});

で作れんで ➡ サンプル3

投稿2021/09/23 14:44

編集2021/09/23 15:55
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

checkbox

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

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。