先週のダウンロードランキング上位にあったものから一つご紹介したいと思います。
このブログのサンプルにも出てくる表示・非表示系ですが、ＤＩＶタグを利用したものがほとんどです。でも！今回ご紹介するのは、ＤＩＶタグではなくとも、スタイルのVisibility値を変更することには変わらない、ということもふまえたForm内でのテキストボックスをラジオボタンで表示・非表示切り替えするサンプルです。
うさのJavaScript講座内サンプルでは、サンプル集4-21にてダウンロード可能となっております。
このサンプルでは表示関数と非表示関数を分離して記述していますが、以前の記事のイメージをDIVで表示・非表示と同様、現在の状態をフラグで保持し切り替えるタイプにするとひとつの関数で処理を行うことも可能です。

毎度の記述になってしまいますが、古いブラウザなど一部のブラウザではFormの指定方法が異なります。サンプル集４・フォーム関連のサンプルをガサガサ見てみてくださいませ。

表示 非表示

ソースはこちら↓

<script language="javascript"> <!-- //------------------------------------------------------------ //javascript by ＠うさ http://usagi-js.com/ //------------------------------------------------------------ function Show() { //一部のブラウザでは見れない場合があります。必要に応じてここにブラウザ判定を入れてください。 document.frmForm.targetTextBox.style.visibility="visible"; //ブログで公開しているのはこちら↓ 　　　　　　　//document.getElementById('targetTextBox').style.visibility="visible"; } function Hide() { //一部のブラウザでは見れない場合があります。必要に応じてここにブラウザ判定を入れてください。 document.frmForm.targetTextBox.style.visibility="hidden"; //ブログで公開しているのはこちら↓ 　　　　　　　//document.getElementById('targetTextBox').style.visibility="hidden"; } //--> </script> <!--以下HTML部です--> <FORM name="frmForm"> <INPUT type="radio" name="rdoSample" value="1" checked onClick="Show()">表示 <INPUT type="radio" name="rdoSample" value="0" onClick="Hide()">非表示 <INPUT size="20" type="text" name="targetTextBox" value="テキストボックス" onclick="Show()"></FORM>