cafe-beret回答ポイント 1000pt

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

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

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

pyopyopyo2019/01/24 14:09:36
満足500pt

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

やっていることは

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

スター

1件のコメントを見る
pyopyopyo 2019/01/24 14:11:22

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

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

 スター

その他の回答

cafe-beret
2019/01/23 22:08:27

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>

a-kuma32019/01/24 14:26:57
満足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 タグの末尾の辺り

スター

1件のコメントを見る
a-kuma3 2019/01/24 14:29:13

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

スター

cafe-beret
2019/01/24 15:50:12

お二人ともありがとうございました！
2つとも試してみたのですが、両方共まさに思った通りの動きとなりました。本当に感謝しかありません。
BAは先にご回答いただいたpyopyopyo様とさせていただきました。
コメントもありがとうございます。
何卒よろしくお願い致します。

この質問へのコメント

deep_one2019/01/24 10:28:59

むかしjQueryとか使って似たようなことをやらされた記憶がある…（DOMの操作を自作するのはややこしかった）

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

（調べた）フォーム要素にはdisabledしかないのか。disableがだめでCSSのvisibilityに頼らないなら要素自体をjavascriptで追加する羽目になる？
pyopyopyo2019/01/27 23:05:27

回答リクエストが届いてて，新幹線で移動中で少し手が空いたので回答したのですが
a-kuma3さんも同じタイミングで回答準備されてたんですね．なんだか申し訳ないです

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

まあ人力検索というぐらいで
回答者側に負担を強いるのは当然というコンセプトなのかも知れませんが．
a-kuma32019/01/28 09:36:10

ぼくもリクエストをもらってて、ソース書いて系の質問なので、どうせ回答はつかないだろうと、投稿前の確認をサボっちゃいました。
お気遣い、すみません。
pyopyopyo2019/01/29 17:23:05

なんと！そういうことだったのですね．

次回からはリクエスト来ても無視することにします．
a-kuma32019/01/29 17:58:57

いや、ぼくも数日放置してましたし、以前ほど、ここに来なくなったので、pyopyopyo さんもぜひ回答を！
cafe-beret2019/02/09 13:22:13

返信が遅くなり大変失礼しました。
本件、大変身勝手ながら急いでいたこともあり、過去にご回答・ご協力いただいた方すべてに回答リクエストを送ってしまいました。結果、みなさまにご迷惑をおかけし申し訳ありませんでした。

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

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

ベストアンサー

pyopyopyo2019/01/24 14:09:36
満足500pt

pyopyopyo 2019/01/24 14:11:22

その他の回答

cafe-beret
2019/01/23 22:08:27

a-kuma32019/01/24 14:26:57
満足500pt

a-kuma3 2019/01/24 14:29:13

cafe-beret
2019/01/24 15:50:12

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

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

ベストアンサー

pyopyopyo2019/01/24 14:09:36 満足500pt

pyopyopyo 2019/01/24 14:11:22

その他の回答

cafe-beret 2019/01/23 22:08:27

a-kuma32019/01/24 14:26:57 満足500pt

a-kuma3 2019/01/24 14:29:13

cafe-beret 2019/01/24 15:50:12

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

pyopyopyo2019/01/24 14:09:36
満足500pt

cafe-beret
2019/01/23 22:08:27

a-kuma32019/01/24 14:26:57
満足500pt

cafe-beret
2019/01/24 15:50:12