ラジオボタンを選択したらフォームを表示したり消したり

HTMLでのラジオボタン

input要素に type="radio" を指定すると、ラジオボタンを作成することができる。

type = "radio" : ラジオボタンを作成
name = "" : 部品の名前を指定
value = "" : 送信される文字列を指定

checked : 選択された状態を指定、値は不要
disabled : 部品を無効化する（主に、JavaScript等と組み合わせて使用する）

JSでの画像などの表示・非表示の切り替え

・displayを使う場合

<div id="message">こんにちは</div>

<form>
<input type="button" value="表示" onclick="hyoji()">
<input type="button" value="非表示" onclick="hihyoji()">
</form>

<script>
function hyoji() {
    document.getElementById("message").style.display="block";
}

function hihyoji() {
    document.getElementById("message").style.display="none";
}
</script>

この場合、<div id="main">こんにちは</div>の空間が無くなって、
下の部分が繰り上がる。

・visibilityを使う場合

<div id="message">こんにちは</div>

<form>
<input type="button" value="表示" onclick="hyoji()">
<input type="button" value="非表示" onclick="hihyoji()">
</form>

<script>
function hyoji() {
    document.getElementById("message").style.visibility="visible";
}

function hihyoji() {
    document.getElementById("message").style.visibility="hidden";
}
</script>

displayと違うのは、非表示にした時。
この場合、<div id="main">こんにちは</div>の空間がそのまま残り、
下の行が繰り上がることはない。

ラジオボタン + 表示・非表示

・displayを使う場合

<p>選択してください<br>
<input type="radio" name="searchtype" value="1" onclick="hyoji()">表示
<input type="radio" name="searchtype" value="2" onclick="hihyoji()">非表示</p>

<div id="main">こんにちは</div>

<script>
function hyoji() {
    document.getElementById("main").style.display="block";
}

function hihyoji() {
    document.getElementById("main").style.display="none";
}
</script>

・visibilityを使う場合

<p>選択してください<br>
<input type="radio" name="searchtype" value="1" onclick="hyoji()">表示
<input type="radio" name="searchtype" value="2" onclick="hihyoji()">非表示</p>

<div id="main">こんにちは</div>

<script>
function hyoji() {
    document.getElementById("main").style.visibility="visible";
}

function hihyoji() {
    document.getElementById("main").style.visibility="hidden";
}
</script>