【JavaScript】Javascriptで表示と非表示のきりかえ

※はてブより引っ越しました。

たまーに必要になるJavaScriptでの表示と非表示のきりかえについて。

今回はラジオボタンを押したら表示と非表示が切り替わる動きにしました。

表示と非表示を切り替える

ラジオボタンで表示と非表示を切り替えるやり方です。

スクリプト。

<script language=javascript>

 // 表示変更イベント
 function onChangeRadio(obj) {
     if(obj.value == 0) {
       document.getElementById("selectRadio").style.display = "block";
     } else {
       document.getElementById("selectRadio").style.display = "none";
    }
	
}

</script>

formの内容。

<form>
	<div id="selectRadio">チェックすると変わるよ</div>
	表示
	<input type="radio" value="0" onclick="onChangeRadio(this)"/>
	非表示
	<input type="radio" value="1" onclick="onChangeRadio(this)"/>
</form>

表示と非表示を切り替えるのはいくつか方法がありますが今回はdisplayの"block"と"none"で切り替えています。

thisでformの内容を引数で渡していますね。

F12でデバックして引数のobjの値を見てみると"0"と"1"で切り替わっているのがわかると思います。

まとめ

displayを使って表示と非表示を切り替えることができました。

JavaScriptはなんとなーく使っているので、一度ちゃんと勉強しないとですね('ω')