前回の続きです。
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の引数を１つ増やすのもいいと思います。