ツリー形式の選択　表示、非表示

解決済

質問者：deux
質問日時：2006/08/09 17:21
回答数：2件

項目が500程度ある中から10項目程度を選択するフォームを作っています。
項目が多いため、細かくカテゴリ分けをしておきカテゴリをクリックすると選択項目を表示し、チェックさせるようにしようと思っていますが、下に記述したソースですと再度クリックすると選択項目すべてが非表示となってしまいます。

それを非表示にしてもチェックした項目だけは表示できる方法はないでしょうか？

javascript・CSSは詳しくなく、難しいことは分からないんですがよい方法があれば教えてください。
もっと選択が簡単分かりやすくできそうな方法でも大歓迎です。

以下は、ツリー形式でカテゴリをクリックすると選択項目を表示したり非表示にしたりするソースです。

-------------------------
<HTML>
<HEAD>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="javaScript:treeMenu(1)">+大カテゴリ</a><br>
<DIV id="treeMenu1" style="display:none">
　項目1<input type="checkbox" name="aaa[1]" value="1"><BR>
　項目2<input type="checkbox" name="aaa[2]" value="2"><BR>
　項目3<input type="checkbox" name="aaa[3]" value="3"><BR>
　項目4<input type="checkbox" name="aaa[4]" value="4"><BR>
</DIV>
</BODY>
</HTML>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： noname#19197
回答日時：2006/08/09 18:15

回答をそのまま載せてしまうと違反になってしまうので、ヒントだけ。

このHTML構成では、選択されていない行だけ非表示することはできません。
-------------------------------------------------
項目1<input type="checkbox" name="aaa[1]" value="1"><BR>
この一行をひとつの要素として認識させるために、divかspanで囲います。

あとは、ひとつずつの要素ごとにチェックされているかどうかを確認して表示/非表示の設定をしていけばいいです。

表示/非表示の方法は、大カテゴリを選択したときと同様にstyleのdispley属性を使うといいです。

- 0
- 件

通報する

No.1

回答者： noname#19197
回答日時：2006/08/09 17:28

<!--

// ツリーメニュー
flag = false;
function treeMenu(menuNo) {
tName = "treeMenu" + menuNo;
tMenu = document.all[tName].style;
if(tMenu.display == 'none') tMenu.display = "block";
}

こういうことでしょうか？

この回答への補足

説明不足ですみません。。。
クリックして非表示にした場合、
チェックボックスにチェックした項目のみ表示させ、
チェックしてない項目は非表示にしたいのです。

例：質問のソースを使用した場合
項目1のチェックボックスにチェックをいれ、項目2,3,4にはチェックを入れてない場合、再度”+大カテゴリ”をクリックすると項目1だけ”+大カテゴリ”の下に表示する。
分かりにくいでしょうか。。。

以上よろしくお願いいたします。

補足日時：2006/08/09 17:43

通報する