id:cafe-beret
ポイントあり1000ptベストアンサーあり
インターネットウェブ制作

ラジオボタンで表示を出し分けるJavaScriptの書き方

お世話になります。以下の件で詰まってしまい、ご教示いただけませんでしょうか
【やりたいこと】
・ラジオボタンの選択によってhtmlの表示を変えたい
　→表示/非表示、並びに項目の名前を変えたい
・（できれば）CSSはいじりたくない

これまでのコードはコメント欄に書かせていただきます。

回答の条件
  • 1人50回まで
  • 登録：
  • 終了：2019/01/24 15:48:27
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
id:cafe-beret

質問者から

cafe-beret2019/01/24 23:37:53

html

<main class="form">
		<section>
			<div class="form__wrapper">
				<form method="post" action="mail.php">
				<h2 class="section__title">お問い合わせ種別</h2>
					<table class="form__table">
						<tr><th>お問い合わせ種別<span class="form__required">必須</span></th><td>
						  <label class="form__radio">
							<input type="radio" name="お問い合わせ種別" value="個人" id="classification_0">
							個　人</label>
						  <label class="form__radio">
							<input type="radio" name="お問い合わせ種別" value="法人" id="classification_2">
							法　人</label>
						  </td></tr>

※※ここに、「法人」を選択したら以下の要素を入れたい。
						<tr><th>法人名</th>
							<td><input type="text" class="form__text-box form__text-box--large" placeholder="hogehoge"></td></tr>
※※ココまで
					</table>
					
					<h2 class="section__title">お客様情報</h2>
					<table class="form__table">
						<tr>

※※以下の「お名前」という項目について、「法人」を選択したら「ご担当者名」という表示に変えたい（name属性も変えたい）
						  <th>お名前<span class="form__required">必須</span></th><td><input type="text" name="お名前" class="form__text-box form__text-box--small" placeholder="姓：hogehoge"><input type="text" class="form__text-box form__text-box--small" placeholder="名：hogehoge"></td></tr>
※※ココまで

（中略）
					<div class="form__button"><input type="submit" style="background:url(button_confirm_2.png);width:522px;height:142px;border:0px solid;" value="" alt="確認画面へ"></div>>

				</form>
			</div>
		</section>
</main>
規約違反として通知

ベストアンサー

id:pyopyopyo No.1

回答回数377ベストアンサー獲得回数98

ポイント500pt

こういう感じでしょうか？
ソース全部貼っておきます
とりあえず mac の safariで動作確認済みです

やっていることは

  1. 個人用，法人用両方のHTMLを書いておく
    • 個人用で表示する部分は id="kojin-field" id="onamae-field"
    • 法人用で表示する部分は id="houjin-field" id="tantousya-field"
  2. jQueryを使う
    • 個人のラジオボタンが押されたら
      • id="kojin-field" などを非表示(. hide() )， id="houjin-field"を表示(. show())
    • 個人のラジオボタンが押されたら
      • その逆
  3. ページ読み込み直後に，自動処理でラジオボタンの個人をクリックする ( .trigger('click'))

です

    • これでデフォルトでは個人の方が表示されます


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>



<main class="form">
		<section>
			<div class="form__wrapper">
				<form method="post" action="mail.php">
				<h2 class="section__title">お問い合わせ種別</h2>
					<table class="form__table">
						<tr><th>お問い合わせ種別<span class="form__required">必須</span></th><td>
						  <label class="form__radio">
							<input type="radio" name="お問い合わせ種別" value="個人" id="classification_0">
							個　人</label>
						  <label class="form__radio">
							<input type="radio" name="お問い合わせ種別" value="法人" id="classification_2">
							法　人</label>
						  </td></tr>

						<tr id="houjin-field"><th>法人名</th>
							<td><input type="text" class="form__text-box form__text-box--large" placeholder="hogehoge"></td></tr>
					</table>
					
					<h2 class="section__title">お客様情報</h2>
					<table class="form__table">

<tr id="onamae-field">
  <th>お名前<span class="form__required">必須</span></th><td><input type="text" name="お名前" class="form__text-box form__text-box--small" placeholder="姓：hogehoge"><input type="text" class="form__text-box form__text-box--small" placeholder="名：hogehoge"></td>
</tr>

<tr id="tantousya-field">
  <th>ご担当者名<span class="form__required">必須</span></th><td><input type="text" name="ご担当者名" class="form__text-box form__text-box--small" placeholder="姓：hogehoge"><input type="text" class="form__text-box form__text-box--small" placeholder="名：hogehoge"></td>
</tr>

						
					<div class="form__button"><input type="submit" style="background:url(button_confirm_2.png);width:522px;height:142px;border:0px solid;" value="" alt="確認画面へ"></div>

				</form>
			</div>
		</section>
</main>

<script>
  $('#classification_0' ).click(function(){
      $('#kojin-field').show();
      $('#onamae-field').show();
      $('#houjin-field').hide();
      $('#tantousya-field').hide();
  });
  $('#classification_2' ).click(function(){
      $('#kojin-field').hide();
      $('#onamae-field').hide();
      $('#houjin-field').show();
      $('#tantousya-field').show();
  });

  $(function() {
      $('#classification_0').trigger('click');
  });

</script>

</html>
id:pyopyopyo

説明不足な点があったらおっしゃってください

ただ最近忙しいので返信は週末になるかもです．ごめんなさい

2019/01/24 14:11:22

その他の回答（1件）

id:pyopyopyo No.1

回答回数377ベストアンサー獲得回数98ここでベストアンサー

ポイント500pt

こういう感じでしょうか？
ソース全部貼っておきます
とりあえず mac の safariで動作確認済みです

やっていることは

  1. 個人用，法人用両方のHTMLを書いておく
    • 個人用で表示する部分は id="kojin-field" id="onamae-field"
    • 法人用で表示する部分は id="houjin-field" id="tantousya-field"
  2. jQueryを使う
    • 個人のラジオボタンが押されたら
      • id="kojin-field" などを非表示(. hide() )， id="houjin-field"を表示(. show())
    • 個人のラジオボタンが押されたら
      • その逆
  3. ページ読み込み直後に，自動処理でラジオボタンの個人をクリックする ( .trigger('click'))

です

    • これでデフォルトでは個人の方が表示されます


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>



<main class="form">
		<section>
			<div class="form__wrapper">
				<form method="post" action="mail.php">
				<h2 class="section__title">お問い合わせ種別</h2>
					<table class="form__table">
						<tr><th>お問い合わせ種別<span class="form__required">必須</span></th><td>
						  <label class="form__radio">
							<input type="radio" name="お問い合わせ種別" value="個人" id="classification_0">
							個　人</label>
						  <label class="form__radio">
							<input type="radio" name="お問い合わせ種別" value="法人" id="classification_2">
							法　人</label>
						  </td></tr>

						<tr id="houjin-field"><th>法人名</th>
							<td><input type="text" class="form__text-box form__text-box--large" placeholder="hogehoge"></td></tr>
					</table>
					
					<h2 class="section__title">お客様情報</h2>
					<table class="form__table">

<tr id="onamae-field">
  <th>お名前<span class="form__required">必須</span></th><td><input type="text" name="お名前" class="form__text-box form__text-box--small" placeholder="姓：hogehoge"><input type="text" class="form__text-box form__text-box--small" placeholder="名：hogehoge"></td>
</tr>

<tr id="tantousya-field">
  <th>ご担当者名<span class="form__required">必須</span></th><td><input type="text" name="ご担当者名" class="form__text-box form__text-box--small" placeholder="姓：hogehoge"><input type="text" class="form__text-box form__text-box--small" placeholder="名：hogehoge"></td>
</tr>

						
					<div class="form__button"><input type="submit" style="background:url(button_confirm_2.png);width:522px;height:142px;border:0px solid;" value="" alt="確認画面へ"></div>

				</form>
			</div>
		</section>
</main>

<script>
  $('#classification_0' ).click(function(){
      $('#kojin-field').show();
      $('#onamae-field').show();
      $('#houjin-field').hide();
      $('#tantousya-field').hide();
  });
  $('#classification_2' ).click(function(){
      $('#kojin-field').hide();
      $('#onamae-field').hide();
      $('#houjin-field').show();
      $('#tantousya-field').show();
  });

  $(function() {
      $('#classification_0').trigger('click');
  });

</script>

</html>
id:pyopyopyo

説明不足な点があったらおっしゃってください

ただ最近忙しいので返信は週末になるかもです．ごめんなさい

2019/01/24 14:11:22
id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154

ポイント500pt

こんな感じでどうでしょう。

<main class="form">
    <section>
        <div class="form__wrapper">
            <form method="post" action="mail.php">
            <h2 class="section__title">お問い合わせ種別</h2>
                <table class="form__table">
                    <tr><th>お問い合わせ種別<span class="form__required">必須</span></th><td>
                      <label class="form__radio">
                        <input type="radio" name="お問い合わせ種別" value="個人" id="classification_0">
                        個　人</label>
                      <label class="form__radio">
                        <input type="radio" name="お問い合わせ種別" value="法人" id="classification_2">
                        法　人</label>
                      </td></tr>

                    <tr class="company_name" style="display: none;"><th>法人名</th>
                        <td><input type="text" class="form__text-box form__text-box--large" placeholder="hogehoge"></td></tr>
                </table>
                
                <h2 class="section__title">お客様情報</h2>
                <table class="form__table">
                    <tr>

<th><span class="name_label">お名前</span><span class="form__required">必須</span></th><td><input type="text" name="お名前" class="form__text-box form__text-box--small" placeholder="姓：hogehoge"><input type="text" class="form__text-box form__text-box--small" placeholder="名：hogehoge"></td></tr>

（中略）
                </table>
                <div class="form__button"><input type="submit" style="background:url(button_confirm_2.png);width:522px;height:142px;border:0px solid;" value="" alt="確認画面へ"></div>

            </form>
        </div>
    </section>
</main>
<script>
window.addEventListener("load", function() {
    const f = document.querySelector("main.form .form__wrapper form");
    const rb_0 = f[0], rb_2 = f[1];
    const cp = f.querySelector(".company_name");
    const nl = f.querySelector(".name_label");
    rb_2.addEventListener("change", function (ev) {
        if (ev.target.checked) {
            cp.style.display = "";
            nl.innerHTML = "ご担当者名";
        }
    });
    rb_0.addEventListener("change", function (ev) {
        if (ev.target.checked) {
            cp.style.display = "none";
            nl.innerHTML = "お名前";
        }
    });
});
</script>

MAIN タグの後に、やりたいことを行うスクリプトを追加しています。
実行環境の指定がなかったので、今どきのモダンブラウザを想定しています。

あと、それ以外に、HTML を少しだけいじってます。

  • 法人名を入力する TR タグに、class 属性と、style 属性を追加した
  • 「お名前」を SPAN タグでくくって、class 属性を入れた
  • ふたつ目の TABLE タグの末尾の辺り
id:a-kuma3

おっと、回答がついてたか...

2019/01/24 14:29:13
id:cafe-beret

質問者から

cafe-beret2019/01/24 23:37:53

お二人ともありがとうございました！

2つとも試してみたのですが、両方共まさに思った通りの動きとなりました。本当に感謝しかありません。

BAは先にご回答いただいたpyopyopyo様とさせていただきました。

コメントもありがとうございます。

何卒よろしくお願い致します。

規約違反として通知

コメント（6件)

  • id:deep_one
    deep_one 2019/01/24 10:28:59
    むかしjQueryとか使って似たようなことをやらされた記憶がある…（DOMの操作を自作するのはややこしかった）

    選択肢のon_clickでスクリプトを実行して追加選択肢のvisibleを書き換えるだけにするとインパクトが小さいのか。

    （調べた）フォーム要素にはdisabledしかないのか。disableがだめでCSSのvisibilityに頼らないなら要素自体をjavascriptで追加する羽目になる？
  • id:pyopyopyo
    pyopyopyo 2019/01/27 23:05:27
    回答リクエストが届いてて，新幹線で移動中で少し手が空いたので回答したのですが
    a-kuma3さんも同じタイミングで回答準備されてたんですね．なんだか申し訳ないです

    システム側がもう少し工夫して
    回答リクエスト中であること，つまり誰かが回答を準備中であることは
    他のユーザに判るようにしても良いかも知れませんね

    まあ人力検索というぐらいで
    回答者側に負担を強いるのは当然というコンセプトなのかも知れませんが．
  • id:a-kuma3
    a-kuma3 2019/01/28 09:36:10
    ぼくもリクエストをもらってて、ソース書いて系の質問なので、どうせ回答はつかないだろうと、投稿前の確認をサボっちゃいました。
    お気遣い、すみません。
  • id:pyopyopyo
    pyopyopyo 2019/01/29 17:23:05
    なんと！そういうことだったのですね．

    次回からはリクエスト来ても無視することにします．
  • id:a-kuma3
    a-kuma3 2019/01/29 17:58:57
    いや、ぼくも数日放置してましたし、以前ほど、ここに来なくなったので、pyopyopyo さんもぜひ回答を！
  • id:cafe-beret
    cafe-beret 2019/02/09 13:22:13
    返信が遅くなり大変失礼しました。
    本件、大変身勝手ながら急いでいたこともあり、過去にご回答・ご協力いただいた方すべてに回答リクエストを送ってしまいました。結果、みなさまにご迷惑をおかけし申し訳ありませんでした。

    いつも的確なお答えをいただけるはてなのシステムは、未熟者の私には大変ありがたいものと感じております。この場をお借りし、再度深謝申し上げます。ありがとうございました。

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ