<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表示非表示の切り替え</title>
</head>
<body>
<form>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>利用方法</th>
<td>
<label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();"
checked="checked" />初めて申し込む</label>
<label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />2度目以降の利用</label>
</td>
</tr>
<!--表示切替-->
<tr id="firstBox">
<th>紹介者</th>
<td><input type="text"/>
<p>紹介された方のお名前を入力してください。
</p>
</td>
</tr>
<!-- 表示非表示切替-->
<tr id="secondBox">
<th>会員番号</th>
<td><input type="text"/>
<p>会員番号を入力してください</p>
</td>
</tr>
</table>
</form>
<!-- 表示非表示切替 -->
<div id="firstNotice">特典:初めての方は30%オフ!</div>
<script src="js/main11.js"></script>
</body>
</html>
function entryChange1() {
radio = document.getElementsByName('entryPlan')
if (radio[0].checked) {
//フォーム
document.getElementById('firstBox').style.display = "";
document.getElementById('secondBox').style.display = "none";
//特典
document.getElementById('firstNotice').style.display = "";
} else if (radio[1].checked) {
//フォーム
document.getElementById('firstBox').style.display = "none";
document.getElementById('secondBox').style.display = "";
//特典
document.getElementById('firstNotice').style.display = "none";
}
}
//オンロードさせ、リロード時に選択を保持
window.onload = entryChange1;
ブログ↓
https://greenberet.net/mosya-coding-udemy/
