フォームの上下に一括チェックボックスを置くには？

質問

HTML＋Javascriptで、選択削除のフォームを作っています。
一覧の上下に一括チェックボックスを置きたいのですが上手く行かないのです。

--------------------
javascript↓
--------------------

//一括チェック用チェックボックス
function allcheck() {
var count = document.delete.chk.length;
var allcheck = document.delete.chk_all.checked;

for ( var i=0; i<count; i++) {
var check = document.delete.chk[i].checked;

if (allcheck == true) {
document.delete.chk[i].checked = true;
} else {
document.delete.chk[i].checked = false;
}
}
}

//個別チェック用チェックボックス
function check(onjCheck) {
if (onjCheck.checked == false) {
document.delete.chk_all.checked = false;
return;
}

var count = document.delete.chk.length;
for (var i=0; i<count; i++) {
if (document.delete.name != "chk_all" && document.delete.chk[i].checked == false) {
return;
}
}
document.delete.chk_all.checked = true;
}

--------------------
HTML↓
--------------------

<form action="" name="delete">
<fieldset>
<input type="checkbox" name="chk_all" id="all_head" onclick="allcheck(this)">
<label for="all_head">すべて選択／解除</label>
<input type="submit" value="選択した項目を削除">
</fieldset>
<fieldset>
<input type="checkbox" name="chk" onclick="check(this)">
項目1
<input type="checkbox" name="chk" onclick="check(this)">
項目2
<input type="checkbox" name="chk" onclick="check(this)">
項目3
</fieldset>
<fieldset>
<input type="checkbox" name="chk_all" id="all_foot" onclick="allcheck(this)">
<label for="all_foot">すべて選択／解除</label>
<input type="submit" value="選択した項目を削除">
</fieldset>
</form>

このように記述しています。
上か下か、片方であれば一括チェックを実現できました。

当方Javascript初心者です。
よろしくご教示願います。

回答No.4

babu_baboo

/* ←この行と

ここに書かれているものが有効になる

*/ ←この行を消す

それで動かないのなら、あきらめましょうか？

お礼

返答ありがとうございます。消してみた結果、やはりIE8のみ動きませんでした。環境の問題だと思いますので色々と調べてみようかと思います。

回答No.3

babu_baboo

/* もしブラウザが使えないときは外す
if(!Array.prototype.forEach)Array.prototype.forEach=function(b,c){var d=this.length;if(typeof b!="function")throw new TypeError;for(var a=0;a<d;a++)a in this&&b.call(c,this[a],a,this)};
if(!Array.prototype.every)Array.prototype.every=function(b,c){var d=this.length;if(typeof b!="function")throw new TypeError;for(var a=0;a<d;a++)if(a in this&&!b.call(c,this[a],a,this))return false;return true};
if(!Array.prototype.reduce)Array.prototype.reduce=function(d){var c=this.length;if(typeof d!="function")throw new TypeError;if(c==0&&arguments.length==1)throw new TypeError;var a=0;if(arguments.length>=2)var b=arguments[1];else{do{if(a in this){b=this[a++];break}if(++a>=c)throw new TypeError;}while(1)}for(;a<c;a++)a in this&&(b=d.call(null,b,this[a],a,this));return b};
*/

function setChecked (e) { e.checked = this.checked; }

function isChecked (e) { return e.checked; }

function toAry (/*nodelist0, nodelist1, ..*/) {
　return Array.prototype.reduce.call (arguments, function (r, nodeList) {
　　return r.concat (Array.prototype.slice.call (nodeList, 0)) }, []);
}

function allcheck (e) {
　var es = e.form.elements;
　toAry (es['chk'], es['chk_all']).forEach (setChecked, e);
}

function check (e) {
　var es = e.form.elements;

　if (e.checked) {
　　if (toAry (es['chk']).every (isChecked)) {
　　　toAry (es['chk_all']).forEach (setChecked, e);
　　}
　}
　else
　　toAry (es['chk_all']).forEach (setChecked, e)
}

補足

回答ありがとうございます。WindowsXP,IE8にて以下のエラーメッセージが出て動きませんでした。解消方法などありましたらご教示頂きたいです。

メッセージ: 'Array.prototype.reduce' は Null またはオブジェクトではありません。
ライン: 12
文字: 2
コード: 0

回答No.2

神崎 渉瑠（@taloo）

動かなくなる原因
-----------------------------

>上か下か、片方であれば一括チェックを実現できました。

上下両方に一括チェックボタンを作ると、その名前、chk_allが２つ作られる事になるので、
document.delete.chk_allが配列になります。
No.1のようにnameではなくidで処理すれば配列にはなりませんが。

var allcheck_top = document.delete.chk_all[0].checked;
var allcheck_bottom = document.delete.chk_all[1].checked;

使いやすくするためのアレンジ
-----------------------------
チェックがついたとき（全て選択）だけでなく、チェックを外すとき（全て解除）の時の違いも考慮して、
上下の一括チェックボタン同士で連動させる処理も付けた方がいいと思います。

<input (中略） onclick="allcheck(this)">
全て選択／解除がこのようになっていますから、

functionの方でもthisを受けるようにして、そちらでcheckedしているかどうかを判断するといいと思います。

function allcheck(chk_all_this) {
var count = document.delete.chk.length;
allcheck = chk_all_this.checked; // 全て選択か、解除か

//上下のチェックボックスを連動させる。
//ループで処理させても良い
document.delete.chk_all[0].checked = document.delete.chk_all[1].checked = allcheck;

// 以後質問文のコードと同じ

お礼

回答有り難うございます。ソースは私の理解が足りなく、うまく動かすことが出来ませんでしたが、解説部分が非常に参考になりました。勉強させて頂き、今後に役立てたいと思います。

回答No.1

cma3atgoo

javascriptを少し直しました
このような動きでよいのでしょうかね

//一括チェック用チェックボックス
function allcheck(all_chk) {
var count = document.delete.chk.length;
var allcheck = all_chk.checked;

for ( var i=0; i<count; i++) {
//チェックありかなしか一括チェックの状態で全部塗り替え
document.delete.chk[i].checked = allcheck;
}

//一括選択のチェックボックスはIDで指定するようにしました
document.delete.all_head.checked = allcheck;
document.delete.all_foot.checked = allcheck;
}

//個別チェック用チェックボックス
function check(onjCheck) {
if (onjCheck.checked == false) {
//一括選択のチェックボックスはIDで指定するようにしました
document.delete.all_head.checked = false;
document.delete.all_foot.checked = false;
return;
} else {
var count = document.delete.chk.length;
for (var i=0; i<count; i++) {
//chkの中には一括選択のチェックボックスは入ってないはず
if (document.delete.chk[i].checked == false) {
return;
}
}
//すべて選択のチェックボックスはIDで指定するようにしました
document.delete.all_head.checked = true;
document.delete.all_foot.checked = true;
}
}

お礼

回答有り難うございます。こちらのソースをそのまま組み込んで、無事に動かすことが出来ました。非常に助かりました！

補足

お礼を申し上げましたが、WindowsXP,IE8にて以下のエラーメッセージが出て動きませんでした。度々申し訳ないですが、解消方法などありましたらご教示頂きたいです。

メッセージ: 識別子がありません。
ライン: 3
文字: 23
コード: 0