![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
項目が500程度ある中から10項目程度を選択するフォームを作っています。
項目が多いため、細かくカテゴリ分けをしておきカテゴリをクリックすると選択項目を表示し、チェックさせるようにしようと思っていますが、下に記述したソースですと再度クリックすると選択項目すべてが非表示となってしまいます。
それを非表示にしてもチェックした項目だけは表示できる方法はないでしょうか?
javascript・CSSは詳しくなく、難しいことは分からないんですがよい方法があれば教えてください。
もっと選択が簡単分かりやすくできそうな方法でも大歓迎です。
以下は、ツリー形式でカテゴリをクリックすると選択項目を表示したり非表示にしたりするソースです。
-------------------------
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
// ツリーメニュー
flag = false;
function treeMenu(menuNo) {
tName = "treeMenu" + menuNo;
tMenu = document.all[tName].style;
if(tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
//-->
</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>
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_04.png?e8efa67)
No.2ベストアンサー
- 回答日時:
回答をそのまま載せてしまうと違反になってしまうので、ヒントだけ。
このHTML構成では、選択されていない行だけ非表示することはできません。
-------------------------------------------------
項目1<input type="checkbox" name="aaa[1]" value="1"><BR>
この一行をひとつの要素として認識させるために、divかspanで囲います。
あとは、ひとつずつの要素ごとにチェックされているかどうかを確認して表示/非表示の設定をしていけばいいです。
表示/非表示の方法は、大カテゴリを選択したときと同様にstyleのdispley属性を使うといいです。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_04.png?e8efa67)
No.1
- 回答日時:
<!--
// ツリーメニュー
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だけ”+大カテゴリ”の下に表示する。
分かりにくいでしょうか。。。
以上よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Nameは配列で、チェックされた...
-
innerHTML内では改行は禁止?
-
javascriptでクイズ
-
クリックされた罫表セルの行番...
-
複数Formから値を取得するやりかた
-
特定<table>内の<td>の色を変える
-
slickのレスポンシブ > center...
-
submitした値を返したい
-
jQueryでクリックされたテーブ...
-
Cookieに保存されない
-
同一nameの input type="text"...
-
Selectの中身をfor文で入れる
-
インラインフレームから親ウィ...
-
Selectボックスの幅を自動で広...
-
クリックさせたいが、click()が...
-
name属性が同じフォームが複数...
-
プルダウン 項目が多いので先頭...
-
プルダウンの選択内容を次のペ...
-
tableの任意行にfocusをあてる
-
【jQuery】input nameの文字列...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jsp/Java】チェックボックス...
-
チェックボックスのON/OFFでVal...
-
複数のチェックボックス項目が...
-
checkboxをクリックしてリロー...
-
背景色を変えて未入力チェック...
-
チェックボックスの設定
-
チェックボックスのON/OFFに応...
-
EclipseでSpringを使用し、テー...
-
JSP内で可変するチェックボック...
-
オフになっているチェックボッ...
-
複数あるチェックボックスから...
-
チェックボックスが複数ある場...
-
チェックボックスに全てチェッ...
-
確認ページからフォームページ...
-
特定のID(またはクラス)で括ら...
-
チェックボックス
-
ラジオボタンとチェックボック...
-
チェックボックスで指定したも...
-
チェックボックスを使って条件検索
-
配列のチェックボックスをjavas...
おすすめ情報