- 締切済み
checkbox ループ
下記のスクリプトだと、 デバックが１６になってしまいます。 これをどうにかして、 ＡをチェックしたらＡ内だけをループ、 ＢをチェックしたらＢ内だけをループさせたいんですが、 どこをどのように修正すればいいですか？？ スクリプトをかなり変えるのは避けたいです。。 教えてください。。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> <SCRIPT language="JavaScript"> function check(n){ document.getElementById('debug').innerHTML = "デバッグ情報"; document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + "<br>lengthは" + document.form1.length; for(i=1; i<=document.form1.length; i++){ if(document.form1.elements["ch" + n].checked){ document.form1.elements["ch" + n + "-" + i].checked = true; document.form1.elements["ch" + n + "-" + i].disabled = true; }else{ document.form1.elements["ch" + n + "-" + i].checked = false; document.form1.elements["ch" + n + "-" + i].disabled = false; } } } </SCRIPT> </HEAD> <BODY> 全てのチェックボックスをチェック/解除 <FORM name="form1"> <p><INPUT type="checkbox" id="ch1" onclick="check(1)">チェックＡ</p> <INPUT type="checkbox" id="ch1-1">チェック１ <INPUT type="checkbox" id="ch1-2">チェック２ <INPUT type="checkbox" id="ch1-3">チェック３<BR><BR> <INPUT type="checkbox" id="ch1-4">チェック４ <INPUT type="checkbox" id="ch1-5">チェック５ <INPUT type="checkbox" id="ch1-6">チェック６<BR><BR> <BR> <p><INPUT type="checkbox" id="ch2" onclick="check(2)">チェックＢ</p> <INPUT type="checkbox" id="ch2-1">チェック１ <INPUT type="checkbox" id="ch2-2">チェック２ <INPUT type="checkbox" id="ch2-3">チェック３ <INPUT type="checkbox" id="ch2-4">チェック４<BR><BR> <INPUT type="checkbox" id="ch2-5">チェック５ <INPUT type="checkbox" id="ch2-6">チェック６ <INPUT type="checkbox" id="ch2-7">チェック７ <INPUT type="checkbox" id="ch2-8">チェック８<BR><BR> <BR> </FORM> <p id="debug"></p> </BODY> </HTML>
- ke---ta
- お礼率11% (3/27)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
document.form1.lengthはform1内のエレメントを数えますので常に16になります。 その数（=16）に対して処理をしているので、ch1-7やch1-8に対しても処理を行うこととなり、ここでエラーが発生しています。 （ブラウザによってはエラーとせず無視するだけの場合もあり。） 無理やり、ご質問のスクリプトに似せて作るならこんなところでしょうか？ （と言っても、だいぶ変わって見えるかも・・・） function check(n){ var cnt=0; var e; var flg=document.form1.elements['ch' + n].checked; for(i=1; i<=document.form1.length; i++){ if (e=document.form1.elements['ch' + n + '-' + i]) { e.checked = flg?true:false; e.disabled = flg?true:false; cnt++; } } document.getElementById('debug').innerHTML = 'デバッグ情報<br>対象数は' + cnt; } いずれにしろ、全部のelement（=16）に対してループしているので、「無駄にループ」しているところは変わってません。（指定方法をもとのロジックと同様の方法にしているので…） 必要最小限のループで行いたいのなら、No.1様の回答にあるようにグルーピングしておくのがよろしいかと思われます。 そうすれば、対象数をlengthでも取得可能になるし、、各タグにいちいちidを振る必要もなくなるでしょう。 （formで送信するときにnameはいるけど、disabledにしてるし・・・どういう使い方なのかよくわかりませんが。）
- yambejp
- ベストアンサー率51% (3827/7415)
元ソースがかなりいけてませんが、ホントにこのままやりたいのですか？ 名前をつかってやるのはミスの元なのでいつか破たんすると思いますよ。 しかもidとnameを混同しているみたいですし・・・ ＞ＡをチェックしたらＡ内だけをループ、 ＞ＢをチェックしたらＢ内だけをループさせたいんですが、 ＞どこをどのように修正すればいいですか？？ グルーピングされていないので、いまのままではなんともなりません。 idをつかってやるのであれば正規表現などでいけるかもしれませんが・・・ また、 ＞ "<br>lengthは" + document.form1.length; これってたんにform1にある要素数を返すだけですから16で間違い ないですが・・・ チェックされている数を知りたいということですか？
補足
はい・・・このままのスクリプトでお願いしたいです・・・ Ａをチェックした時に１６ではなく６、 Ｂをチェックしたときは８にしたいのです。。 無駄にループさせたくないんです。 言ってる意味わかりますか？ うまく言えなくてすいません。。