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

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

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

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

解決済

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

Tanimican
Tanimican

総合スコア30

JavaScript

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

1回答

0グッド

0クリップ

180閲覧

投稿2022/11/08 11:43

編集2022/11/08 12:39

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

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>の最後に書いています。
解答お願いします

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答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

総合スコア2127

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Tanimican

2022/11/08 13:10

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

JavaScript

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