チェックボックスについて

質問

こんばんは。いつもお世話になっておりますが、こちら（JavaScript）では、初めての投函です。

よくヤフーやホットメールなどのwebmailの受信ボックスなどに、削除するためのチェックボックスが備わっておりますが、全てのチェックを入れるために、最初の一行目のチェックボックスにチェックを入れることで全てにチェック。チェックを外す事で全てを外す。という動作が行われていると思います。

私、PHPの方ではよく質問させていただく事もあり、お恥ずかしいながら、上記質問をPHPで・・と思っていたら、これら動作はJavaScriptであることをお教え頂きました。

これまでJavaScriptには無縁であったこともあり、色々なサイトにお邪魔しているものの、設定ボタン、解除ボタンによる設定・解除の説明はあるものの、チェックボックスによる、これらの動作の説明がなく、改めてこちらにて質問させて頂くに至りました。

色々と試してはいるものの、チェックボックスにチェックを入れると全てにチェックが入るが、解除するまでに至っておりません。

お忙しい中恐縮ですが、ご指導のほど宜しくお願い申し上げます。

回答No.1

taseki · ベストアンサー

チェックのオンが完成しているなら、オフも同じ処理で良いと思いますよ。

以下サンプルです（検証していませんが…）。

----------------------- コード
function CheckAlt(oAlt) {
var bCheck = oAlt.checked;
var oInputs = document.getElementById("MailList").getElementsByTagName("input");
for (var i = 0; i < oInputs.length; i++) {
if (oInputs[i].getAttribute("type") == "checkbox") {
oInputs[i].checked = bCheck;
}
}
}
-----------------------

----------------------- HTML

すべてをOn/Off<input type="checkbox" onclick="CheckAlt(this)"><br>

<div id="MailList">
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
</div>

-----------------------

お礼

taseki様

はじめまして。おはよう御座います。
早速検証をさせて頂き、描いていた表示（動作）を得る事ができました。

これまでJavaScriptとは無縁ではありましたが、これを機に深めていきたく思っております。
ご親切な対応を有難う御座いました。