- PR -

JavaScriptによるループでのチェックボックスの一括チェックON,OFF処理

1
投稿者投稿内容
osiete
常連さん
会議室デビュー日: 2008/03/17
投稿数: 26
投稿日時: 2008-10-15 10:09
JavaScriptにて
CheckBoxのグループを一括チェックする機能を実装しているのですが

for文にてループ処理を行いchecked = trueでひとつづつチェックを行っているので
CheckBoxが多い時には速度がかなり遅くなってしまうのですが
なにかいい方法ありませんでしょうか？

ブラウザはIE6,IE7が対象です。
JavaScriptライブラリ使用化です。

こんな感じです。
var loopMax=document.forms[0].CheckBox.length;
for(cnt=0;cnt<loopMax;cnt++){
　　document.forms[0].CheckBox[cnt].checked = true;
}

よろしくお願いいたします。
sawat
大ベテラン
会議室デビュー日: 2006/08/02
投稿数: 112
投稿日時: 2008-10-15 10:48
以下のようにすれば、ほんの少しだけ早くなるハズです。
コード:
var checkBox=document.forms[0].CheckBox;
var loopMax=checkBox.length; 
for(cnt=0;cnt<loopMax;cnt++){ 
　　checkBox[cnt].checked = true; 
}

# スズメの涙です。体感できるほど変わらない可能性が高いです。
かつのり
ぬし
会議室デビュー日: 2004/03/18
投稿数: 2015
お住まい・勤務地: 札幌
投稿日時: 2008-10-15 13:28
「CheckBoxが多い時には速度がかなり遅くなってしまうのですが」
というのは具体的にどの程度遅いのでしょう？

sawatさんの手法は、IE限定みたいですが、
amachangさんのサイトで公開されている手法に近い概念ですよね。
http://d.hatena.ne.jp/amachang/20071010/1192012056

数が増えれば遅くなるのは当たり前の話ですが、
処理時間中にブラウザ操作がブロッキングされると、
ユーザは体感ベースですが、遅いと感じるでしょう。
しかしユーザへ制御を返しながら処理を行えば、
ユーザは引き続き操作を行えるので体感を軽く見せることは可能です。
コード:
(function(cb, i){
	if(cb.length > i){
		cb[i].checked = true;
		var self = arguments.callee;
		window.setTimeout(function(){self(cb, i + 1)}, 0);
	}
})(document.forms[0].checkbox, 0);
osiete
常連さん
会議室デビュー日: 2008/03/17
投稿数: 26
投稿日時: 2008-10-15 14:02
sawatさま
返答ありがとうごいます。
上記方法でためした結果かなり速度が改善いたしました。
ありがとうございます。

かつのりさま
返答ありがとうごいます。
リンク先拝見させていただきます。
sawat
大ベテラン
会議室デビュー日: 2006/08/02
投稿数: 112
投稿日時: 2008-10-15 16:30
引用:

かつのりさんの書き込み (2008-10-15 13:28) より:
sawatさんの手法は、IE限定みたいですが、
amachangさんのサイトで公開されている手法に近い概念ですよね。
http://d.hatena.ne.jp/amachang/20071010/1192012056

手法自体はIEに限ったものではありません。
(osieteさんのコードが元々IE依存)
JavaScriptのドット演算子(.)やブラケット([ ])はオブジェクトのハッシュテーブルへのアクセスになるので、JavaやCなど他の言語における同等の演算子に比べてコストが高いのです。なので、ループ内で固定のドットやブラケットの連鎖がある場合は、それをループ外に出せば多少の高速化が見込めます。

# JavaScriptがのろいIEが一番効果があると思いますが。
# Google ChromeはJITコンパイラがあるから変らないかな

[ メッセージ編集済み 編集者: sawat 編集日時 2008-10-15 16:32 ]
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2008-10-15 18:56
for(var cnt…のほうが良いでしょう。
つけないとJavaScriptはグローバル変数と見なしたかと。


今回はループ内が1行だけですが、checkBox[cnt]が複数ならこれも変数に代入するほうが良いですね。
さらに、これも今回当てはまりませんが、IEだとループ内の文字列を変数にするだけで速くなります。

…スズメの涙ですが。
かつのり
ぬし
会議室デビュー日: 2004/03/18
投稿数: 2015
お住まい・勤務地: 札幌
投稿日時: 2008-10-15 20:55
改めて読むと、書き方が悪かったです。。。

IEでの効果が特に高く、IE以外のブラウザでは、
体感できるほどの差はないだろうな・・・というつもりで、
あんな書き方になってしまいました。
1

スキルアップ／キャリアアップ（JOB@IT）