ここから本文です

HTMLで入力フォームを作る時、ラジオボタンでAコース、Bコースとがあり、 Aコース...

サラサラーさん

2018/8/2504:10:56

HTMLで入力フォームを作る時、ラジオボタンでAコース、Bコースとがあり、
Aコースを選択するとプラン1とプラン2が、
Bコースを選択するとプラン3とプラン4が出てきて

コースごとに表示を変えるのはどうすれば出来ますか?

閲覧数:
37
回答数:
4
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

yus********さん

2018/8/2522:14:52

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.plan {
display : none;
margin : 0 1%;
}
</style>
</head>
<body>
<input type="radio" id="courseA" name="course" onclick="radio_check(this);">
<label for="courseA">コースA</label>
<input type="radio" id="courseB" name="course" onclick="radio_check(this);">
<label for="courseB">コースB</label>
<div id="all_plan">
<p class="plan">プラン1</p>
<p class="plan">プラン2</p>
<p class="plan">プラン3</p>
<p class="plan">プラン4</p>
</div>
<script>
function radio_check (redioID){
let plan = document.getElementsByClassName("plan");
switch(redioID.id){
case "courseA":
plan[0].style.display = "inline-block";
plan[1].style.display = "none";
plan[2].style.display = "inline-block";
plan[3].style.display = "none";
break;
case "courseB":
plan[0].style.display = "none";
plan[1].style.display = "inline-block";
plan[2].style.display = "none";
plan[3].style.display = "inline-block";
break;
}
}
</script>
</body>
</html>

質問した人からのコメント

2018/8/27 13:58:49

ありがとうございます!

ベストアンサー以外の回答

1〜3件/3件中

並び替え:回答日時の
新しい順
|古い順

プロフィール画像

カテゴリマスター

yoy********さん

2018/8/2522:16:44

https://ws.formzu.net/fgen/S85447550/

「フォームズ」というサイトで作成した。
javascriptを付けることがない。
つまり、自動的にjavascriptが生成されるので、楽なんです。
「フォームズ」は「条件設定」というのがあるので、簡単に作成できるのです。

プロフィール画像

カテゴリマスター

shimixさん

2018/8/2521:06:24

選択した時点で変更したければ、JavaScriptでやることになると思います

#その場合はJavaScriptカテゴリでどうぞ

選択してPOSTしてからプラン表示を行うならサーバサイド(php)でやることになりますが、それは難しくはないですよね(当たり前すぎて「何がわからないのかわからない」レベルの質問になる)。∴ おそらくはJavaScriptの話なんでしょうねぇ・・・

まぁ前述のJavaScriptをphpで(コースとプランの対応を動的に変更できるように)生成するというのもあるでしょうけど、まずは静的に書けないと話になりませんし(汗

por********さん

2018/8/2505:23:26

JavaScriptを使うなり、POSTするなりで可能です。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる