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

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

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

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

Q&A

解決済

1回答

269閲覧

チェックボックスをチェックしたら詳細をチェックボックスの下に表示させたい

Tanimican

総合スコア30

JavaScript

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

0グッド

0クリップ

投稿2022/11/08 11:43

編集2022/11/08 22:10

カード払いの見た目を今作っています。
やりたいこととして、カード払いのチェックボタンを押下時にカードの情報を入力するテキストを表示させたいです。

html

1 <form name="test_from"> 2 <label><input type="checkbox" name="payment" onchange="myfunc()"/>カードで支払い</label> 3 <div id="hidden1"> 4 <p>カード表の12桁の数字を入力してください</p> 5 <input type="text" name="cash" value="" placeholder="12桁の数字" > 6 <p>カード裏のPINコードを入力してください</p> 7 <input type="text" name="cash" value="" placeholder="PINコード(3文字)" > 8 </div> 9 </form>

js

1<script> 2 document.getElementById("hidden1").style.display ="none"; 3 4 function Checked(){ 5 var check = document.test_from.all.checked; 6 for (var i=0; i<document.test_from.test.length; i++){ 7 document.test_from.test[i].checked = check; 8 } 9    myfunc() 10 } 11 12 function myfunc() { 13 var check1 = document.getElementById("checkbox").checked; 14 var hidden1 = document.getElementById("hidden1"); 15 16 if(check1 == true){ 17 hidden1.style.display ="block"; 18 } 19 else{ 20 hidden1.style.display ="none"; 21 } 22 } 23 </script>

jsは<body>の最後に書いています。
解答お願いします

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

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

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

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

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

guest

回答1

0

ベストアンサー

不具合の原因

  • var check1 = document.getElementById("checkbox").checked;とあるが、idがcheckboxの要素は存在しないため、エラーになる。

改善提案

  • htmlタグの中にonClick="myFunction()"と書くのは古い手法のため、現在は非推奨です。
    • 代わりに、.addEventListener()を使いましょう
  • 同じnameをつけている要素があったので、別のnameにしましょう。
  • 表示非表示の切り替えを.is-hiddenクラスの付けはずしによる制御にしてみました。
  • カード支払いが選択されていないときは、カード情報入力欄は任意項目に。選択されているときは、必須項目とするためにrequired属性をつけはずしするようにしました。

完成コード例

html

1<form name="testForm"> 2 <label><input type="checkbox" name="cardPayment">カードで支払い</label> 3 <div id="card-info" class="is-hidden"> 4 <p>カード表の12桁の数字を入力してください</p> 5 <input type="text" name="cardNumber" placeholder="12桁の数字"> 6 <p>カード裏のPINコードを入力してください</p> 7 <input type="text" name="cardPIN" placeholder="PINコード(3文字)"> 8 </div> 9</form>

css

1.is-hidden { 2 display: none; 3}

javascript

1// 必要な要素を取得 2const cardInfoContainer = document.querySelector('#card-info'); 3const testForm = document.testForm; 4const cardPayment = document.testForm.cardPayment; 5const cardNumber = document.testForm.cardNumber; 6const cardPIN = document.testForm.cardPIN; 7 8// チェックボックスのチェック状態が切り替わった時にイベント発火 9cardPayment.addEventListener('change', toggleCardInfo, false); 10 11// カード情報入力欄の有効化/無効化を切り替える関数 12function toggleCardInfo(event) { 13 // チェックが入っているかどうかの判定 14 const isChecked = event.target.checked; 15 16 // チェックが入ったら 17 if (isChecked) { 18 cardInfoContainer.classList.remove('is-hidden'); // is-hiddenクラスを外す(表示させる) 19 cardNumber.required = true; // カード番号入力欄を必須項目にする 20 cardPIN.required = true; // PINコード入力欄を必須項目にする 21 } else { // チェックがはずれたら 22 cardInfoContainer.classList.add('is-hidden'); // is-hiddenクラスをつける(非表示にする) 23 cardNumber.required = false; // カード番号入力欄を任意にする 24 cardPIN.required = false; // PINコード入力欄を任意にする 25 } 26}

投稿2022/11/08 12:44

Cocode

総合スコア2314

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

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

Tanimican

2022/11/08 13:10

わかりやすい解答ありがとうございます。 わからない部分もあったため、調べながらもう一度1からやってみます。 今後もよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問