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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

checkbox

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

ラジオボタン

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2258閲覧

checkboxのチェックされてるか否かでの表示/非表示について

tantalus

総合スコア16

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

checkbox

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

ラジオボタン

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/05/17 13:30

チェックボックスにチェックが付いた際にinput内のvalueを取り出し、
表示をさせるといった実装をコントロールしたいです。

こちらのサイト([https://itsakura.com/js-checkbox])を参考にさせていただき、
checkboxにチェックしてボタンを押すと値を表示し、非表示にしていたものも表示できるようにまでできました。

ただ、現在の仕様だと値はでるのですが、一番下(みかん)にチェックをいれないと【テキスト入れる】と【最終決定ボタン】がでなくなってしまいました…。
なぜ一番下だけ反応しているのでしょうか…
checkboxボタンにチェックをし、ボタンを押すと表示、全部はずしてボタンを押すと非表示をいったようにコントロールするにはどのようにコードを修正すればいいのかお力を賜わりたくこちらに投稿させていただきました。

html

1<div class="checkListWrap"> 2 <div class="wrapBorder"> 3 <p> 4 <strong> 5 ダミーテキストダミーテキストダミーテキストダミーテキスト 6 </strong> 7 </p> 8 <div id="checkWrap"> 9 <form action="" method="post" name="form1" target="successIframe" onSubmit="return check()"> 10 <p class="checkList"> 11 <input type="checkbox" id="touch1" name="product" value="りんご" class="checkbox-input"> 12 <label for="touch1" class="checkbox01">りんご</label> 13 </p> 14 15 <p class="checkList"> 16 <input type="checkbox" id="touch2" name="product" value="バナナ" class="checkbox-input"> 17 <label for="touch2" class="checkbox01">バナナ</label> 18 </p> 19 20 <p class="checkList"> 21 <input type="checkbox" id="touch3" name="product" value="ナシ" class="checkbox-input"> 22 <label for="touch3" class="checkbox01">ナシ</label> 23 </p> 24 25 <p class="checkList"> 26 <input type="checkbox" id="touch4" name="product" value="ぶどう" class="checkbox-input"> 27 <label for="touch4" class="checkbox01">ぶどう</label> 28 </p> 29 30 <p class="checkList"> 31 <input type="checkbox" id="touch5" name="product" value="もも" class="checkbox-input"> 32 <label for="touch5" class="checkbox01">もも</label> 33 </p> 34 35 <p class="checkList"> 36 <input type="checkbox" id="touch6" name="product" value="マンゴー" class="checkbox-input"> 37 <label for="touch6" class="checkbox01">マンゴー</label> 38 </p> 39 40 <p class="checkList"> 41 <input type="checkbox" id="touch7" name="product" value="みかん" class="checkbox-input"> 42 <label for="touch7" class="checkbox01">みかん</label> 43 </p> 44 45 <input type="button" value="商品を確認する" onclick="clickBtn()" id="btn" /> 46 47 <div id="product"></div> 48 <div id="zero" style="display: none;"><span>テキスト入れる</span> 49 <button type="submit" name="button" value="送信" onclick="submitForm()">最終決定ボタン</button> 50 </div> 51 </form> 52 53 </div><!-- checkWrap --> 54 </div><!-- wrapBorder --> 55 56 57 58 </div><!-- checkListWrap -->

javaScript

1<script> 2 function clickBtn() { 3 const arr1 = []; 4 const product = document.form1.product; 5 for (let i = 0; i < product.length; i++) { 6 if (product[i].checked) { 7 arr1.push(product[i].value); 8 document.getElementById("zero").style.display="block"; 9 }else if (product[i]){ 10 document.getElementById("zero").style.display="none"; 11 } 12 } 13 document.getElementById("product").textContent = arr1; 14 } 15</script>

また、このformはグーグルフォームと連動させようと考えており上記のJavaScriptコードだとname="product"で取得しているのですが【input type="checkbox】に変更して使えるようにもするのは可能でしょうか。
※グーグルフォームを使用する際にnameの値にグーグルフォームから書き出された値を入れたいため、自分で適当に入れた【product】というのは使えないのかなと考えているためです。

拙い投稿ではありますが、お知恵をお借りできれば幸いです。
何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

javascript

1function clickBtn() { 2 const product = [...document.querySelectorAll('[name=product]:checked')].map(x=>x.value); 3 document.querySelector("#zero").style.display=product.length?"block":"none"; 4 document.querySelector('#product').textContent = product.join(","); 5}

投稿2021/05/18 00:22

yambejp

総合スコア114581

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

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

tantalus

2021/05/18 00:39

yambejp様 メッセージありがとうございます! こちら参考にさせていただきまして実装できました!コードもいただきましてありがとうございます!
guest

0

iはりんごからみかんまでループしますね。
で、ループの最後でiがみかんを指しているとき、
document.getElementById("zero").style.displayには何がセットされますか?
みかんがチェックされていれば"block"、そうでなければ"none"になっちゃいますよね。

投稿2021/05/17 13:43

itagagaki

総合スコア8402

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

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

tantalus

2021/05/17 13:57

itagagaki様 メッセージありがとうございます! 素人で申し訳ないのですが、みかんだけに影響しちゃう記述になっているということでしょうか…? ご質問の返信になっていなかったら申し訳ないですが、みかんだけに反応している表示/非表示状態をすべてのチェックボックスに反応させたいです。
itagagaki

2021/05/17 14:09

> みかんだけに影響しちゃう記述になっているということでしょうか…? そうではありません。 teratailはプログラミングでのお困りを解決するためのプログラマー向けのサイトですけど(多分)、 そのレベルではないとお見受けしましたので、もう修正案を書いちゃいますね。 function clickBtn() { const arr1 = []; const product = document.form1.product; for (let i = 0; i < product.length; i++) { if (product[i].checked) { arr1.push(product[i].value); } } document.getElementById("product").textContent = arr1; document.getElementById("zero").style.display = arr1.length ? "block" : "none"; }
tantalus

2021/05/17 14:21

ありがとうございます! コードまでいただきまして恐縮です。知識不足以前の問題かもしれないですが不快にさせてしまったら申し訳ないです。 後学までになんですが、私はプログラマーではありません。 こちらにプログラマーではない者が質問するのは避けたほうが良いのでしょうか? もしそうであれば他の方にもご迷惑かけないようにしなければと考えないといけない思いまして。 今回はお力をいただきまして本当にありがとうございました!
itagagaki

2021/05/17 14:28

べつに不快ということはないですよ。 ただ、一応、エンジニア/プログラマのためのサイトということになっていますので。 https://teratail.com/tour そうでない質問もかなり多いのが現状のようにも思いますけどね。
tantalus

2021/05/17 14:35

ありがとうございます! 今後も質問することもあるかと思いますが、知識向上に努めたいと思います。 みなさんそれぞれなんですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問