ここから本文です

JavaScriptの階層的なチェックボックスグループで、大項目を選択すると小項目も選...

aya********さん

2009/8/2815:20:32

JavaScriptの階層的なチェックボックスグループで、大項目を選択すると小項目も選択、小項目を解除すれば大項目も解除する方法を教えてください。大項目A~や小項目1~はDBから取得するため可変です。

前任者が下記のように作成しましたが、現在小項目が1000件近くなり全件ループ部が重いです。
改善案として
<INPUT TYPE="HIDDEN" NAME="HDN_DAI_A" VALUE="0,1">
のように、大項目が持つ小項目の添字をまるごとHiddenで持たせ
JavaScript内で要素分ループさせては判断させようかと思いますが
何かもっと美しい方法はないものでしょうか?

なお、遷移先の処理の関係で、checkboxの名称(name)は変更できません。

<HTML><HEAD>
<SCRIPT LANGUAGE="javascript">
<!--
function fnc_chg_checked(p_object , p_sho, p_dai){
var f = document.testform;
var wk_chkrow;
if(p_sho ==''){
//大項目を選択・解除すれば、それの属する小項目すべてを反映する
for(i=1; i<= f.SHOKOMOKU.length; i++){
if (eval('f.HDN_SHO_DAI_' + i).value == p_dai){
f.SHOKOMOKU[i-1].checked = p_object.checked;
};
};
} else {
//選択した小項目がfalse⇒大項目もfalse
if(p_object.checked==false){
eval('f.DAIKOMOKU_' + p_dai).checked = false;
};
};
};
//-->
</SCRIPT>
</HEAD><BODY><FORM NAME="testform" ACTION="next.html" METHOD="POST">
<INPUT TYPE="checkbox" NAME="DAIKOMOKU_A" VALUE="1000A" onclick="fnc_chg_checked(this,'','A')">大項目A<br>
├─<INPUT TYPE="checkbox" NAME="SHOKOMOKU" VALUE="111" onclick="fnc_chg_checked(this,'111','A')">小項目1<br>
<INPUT TYPE="HIDDEN" NAME="HDN_SHO_DAI_1" VALUE="A">
└─<INPUT TYPE="checkbox" NAME="SHOKOMOKU" VALUE="222" onclick="fnc_chg_checked(this,'222','A')">小項目2<br>
<INPUT TYPE="HIDDEN" NAME="HDN_SHO_DAI_2" VALUE="A">
<INPUT TYPE="checkbox" NAME="DAIKOMOKU_B" VALUE="2000B" onclick="fnc_chg_checked(this,'','B')">大項目B<br>
├─<INPUT TYPE="checkbox" NAME="SHOKOMOKU" VALUE="555" onclick="fnc_chg_checked(this,'555','B')">小項目3<br>
<INPUT TYPE="HIDDEN" NAME="HDN_SHO_DAI_3" VALUE="B">
└─<INPUT TYPE="checkbox" NAME="SHOKOMOKU" VALUE="999" onclick="fnc_chg_checked(this,'999','B')">小項目4<br>
<INPUT TYPE="HIDDEN" NAME="HDN_SHO_DAI_4" VALUE="B">
</FORM></BODY></HTML>

補足>mue_xさん
当方、JavaScriptはまったくの初心者なので、せっかく回答していただいたのに、内容がほとんど理解できてません。
色々調べながらなので明後日の方向の質問かもしれません。

閲覧数:
998
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

mue********さん

2009/8/2903:12:26

要件がよくわからないから方向性だけ書くけど、

・eval使ってるんだからそりゃ遅い。evalやめるだけでも結構違うんでないかい。document.forms[id].elements[name]のアクセスの仕方を使えば、evalなんて必要ない。省略形じゃない書き方をすべし。
・俺ならfieldset要素にするが、divでもpでもいい、1つの大項目とぶらさがる小項目を何らかの要素でグループ化して、大項目に対応する小項目がどこまでなのかをまとめてしまえばいいんでない。そしたら違う大項目にぶらさがる小項目まで走査しなくていいでしょ。
・大項目を変更したときの関数と小項目を変更したときの関数分けたら。無駄にif分岐することないよ。
・iがグローバル変数であるということと、条件式で毎度lengthにアクセスするのがダメ。スナップショットを取って、その数値と比較するほうがいい。

思いつくのはこのくらいかな。

質問した人からのコメント

2009/8/31 11:18:26

関数、やっぱりそうですよね。
if文以外にも、むしろ丸ごと作り変えたいのですが、いろいろと難しいです。
修正に色々と制約があるため、fieldsetでなんとか対応できないか色々試してみます。
沢山の案をありがとうございました。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる