チャックボックスにチェックを外すとフォームが表示される

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>


<input type="checkbox" name="book" value="雑誌" onclick="clickBtn1()" checked="checked" / > 雑誌 


<div id="p1">
  <p>雑誌の名前をお答えください</p>
  <input type="text" name="bookname" value="" placeholder="雑誌名" >
</div>


<script>
//初期表示は非表示
document.getElementById("p1").style.display ="none";

function clickBtn1(){
	const p1 = document.getElementById("p1");

	if(p1.style.display=="block"){
		// noneで非表示
		p1.style.display ="none";
	}else{
		// blockで表示
		p1.style.display ="block";
	}
}
</script>


</body>
</html>

 

コメント

タイトルとURLをコピーしました