HTMLで動的にコントロールの表示/非表示を切り替える

HTMLとJavascriptを使って表示されているテキストボックス(INPUTタグ)の表示/非表示を切り替えます。

スポンサーリンク

動的にコントロールの表示/非表示を切り替える

HTMLとJavascriptを使って表示されているテキストボックス(INPUTタグ)の表示/非表示を切り替えます。

テキストボックス(INPUTタグ)の表示/非表示を切り替えるには

テキストボックス(INPUTタグ)の表示/非表示を切り替えるには表示する際にはstyle.visibilityvisibleを、非表示にする場合にはstyle.visibilityhiddenを設定します。

テキストボックス(INPUTタグ)の表示/非表示を切り替えるソース

以下がソースです。

<html>
<head>
<script type="text/javascript">
    function init()
    {
        document.myForm.inputbox1.style.visibility = "visible" ;
    }
    function disp_ctrl()
    {
        if( document.myForm.inputbox1.style.visibility == "visible" ){
           document.myForm.inputbox1.style.visibility = "hidden" ;
           document.myForm.on_off.value = "ボタン表示" ;
        }
        else{
           document.myForm.inputbox1.style.visibility = "visible" ;
           document.myForm.on_off.value = "ボタン消去" ;
        }
    }
</script>
</head>
<body onLoad="javascript:init();">
    <form name="myForm">
        <input type="text" name="inputbox1"><input type="button" name="on_off"
              value="ボタン消去" onClick="javascript:disp_ctrl();">
    </form>
</body>
</html>

実際に動作するボタン

ボタンを押下するとテキストボックス(INPUTタグ)の表示/非表示が入れ替わります。
以下が実際のボタンです。


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