VBScriptベースHTA：チェックボックスに合わせて要素を表示↔非表示

11811 ワード
hta HTML Windows10 GUI VBScript HTML テキストリンク

前回の続きです。
VBScriptベースのHTAで入力フォームを増やしたり減らしたりする

概要

　チェックを入れると項目を表示して，チェックを外すと項目を非表示にする簡単な実装です。次の項目も表示非表示に合わせて上下します。

スクリプト

以下の内容でメモ帳の拡張子を.htaにして保存すればすぐに使用できます。
　保存時の「文字コード」は「ANSI」にしないと文字化けします。

hta
<html><head>
<title>表示非表示</title></head>
<style type="text/css">
#product{display:none;}
</style>
<body>
<h2>
<input type="checkbox" name="checkboxproduct" 
onClick=display(this.checked,"product") />物品あり
</h2>

<p id="product">品名<br>
<input type="checkbox" name="product"/>ノート
<input type="checkbox" name="product"/>ファイル
<input type="checkbox" name="product"/>えんぴつ その他（入力）
<input type="text" name="product"/>
</p>
<h2>次の項目</h2>

<script language="VBScript">
Sub display(checked,displayTagId)
    If checked=True Then
        document.getElementById(displayTagId).style.display="block"
    Else
        document.getElementById(displayTagId).style.display="none"
            Dim tag
            For Each tag In document.getElementsByName(displayTagId)
                If tag.Id <> displayTagId Then
                    Select Case tag.type
                    Case"radio","checkbox"
                        tag.checked=False
                    Case"text"
                        tag.Value=""
                    End Select
                End If
            Next
    End If
End Sub
</script>
</body>
</html>

説明

　styleタグで初期設定を非表示にしています。

hta
<style type="text/css">
#product{display:none;}
</style>

　表示非表示を変更するチェックボックスのonClickの第一引数でチェックの有無を渡し，表示非表示を切り替えます。

hta
<input type="checkbox" name="checkboxproduct" 
onClick=display(this.checked,"product") />
hta
Sub display(checked,displayTagId)
    If checked=True Then
        document.getElementById(displayTagId).style.display="block"
    Else
        document.getElementById(displayTagId).style.display="none"
    End If
End Sub

　しかし，これだけだと非表示にした要素のチェック内容やテキストが残ってしまい，場合によっては後続の処理に影響してしまいます。
　非表示にしたら，非表示にした要素のチェックやテキストも消す方がユーザーの感覚からも自然でしょう。

　そこで，子要素のnameを同じにすることでgetElementsByNameで全子要素を取得し，タグのTypeに合わせて入力をリセットしています。
　また，親要素のpタグのIDと子要素のinputタグのnameを同名にすることで引数を減らしています。

hta
Else
    document.getElementById(displayTagId).style.display="none"
        Dim tag
        For Each tag In document.getElementsByName(displayTagId)
            If tag.Id <> displayTagId Then
                Select Case tag.type
                Case"radio","checkbox"
                    tag.checked=False
                Case"text"
                    tag.Value=""
                End Select
            End If
        Next
End If
hta
<p id="product">品名<br>
<input type="checkbox" name="product"/>ノート
<input type="checkbox" name="product"/>ファイル
<input type="checkbox" name="product"/>えんぴつ その他（入力）
<input type="text" name="product"/>
</p>

　ただ，IEにはNameと同一のIdタグはgetElementsByNameで拾われてしまうというバグがあり，親要素のpタグまで取得してしまうので，tag.Id <> displayTagIdでこれを避けています。
　もちろん，子要素のNameを親タグのIdと別にして，onClickの引数を１つ増やすのもいいと思います。