Windowsソフト、iPhoneアプリ、ゲーム音楽素材の「Meteoric Stream」 -> 資料室 -> Javascript/ActionScript/HTML/FLASH -> 【Javascript】すべてチェック/チェック解除の実装(name属性が「id[]」などの場合に対応)

【Javascript】すべてチェック/チェック解除の実装(name属性が「id[]」などの場合に対応)

INPUTタグで生成したチェックボックスのname属性が、「test[]」、「id[]」など、英数字以外の記号や文字列を含んでいる場合で、「すべてチェック」や「すべてのチェックを外す」の動作をJavascriptで実装する方法です。(説明がややこしいw)

Javascriptで、「すべてチェック」や「すべてのチェックを外す」を実装すること自体は、document.フォーム名.ラジオボタンの名前[配列数].checkedを、trueにしたり、falseにしたりすれば問題ありません。

それに加えて、ラジオボタンの名前に英数字以外が含まれている場合は、「elements[ラジオボタンの名前]」を呼び出します。

下記、サンプルコードです。

<script>
function check_all(flg, frm, elem){
    var count;
    if(document.frm.elements[elem].length){
        for(count = 0; count < document.frm.elements[elem].length; count++){
            document.frm.elements[elem][count].checked = flg;    //チェックボックスをON/OFFにする
        }
    }
    else{
        document.frm.elements[elem].checked = flg;
    }
}
</script>

<form action="" method="post" name="frm">
<input type="checkbox" onchange="check_all(this.checked, 'frm', 'id[]');">

<input type="checkbox" value="5" name="id[]">
<input type="checkbox" value="4" name="id[]">
<input type="checkbox" value="3" name="id[]">
<input type="checkbox" value="2" name="id[]">
<input type="checkbox" value="1" name="id[]">
</form>


実行結果





















一番目のラジオボタンをチェックすると、それより下のラジオボタンがすべてチェックされるはずです。
この記事の最終更新日:2017/12/13
最初に記事を書いた日:2017/12/13

この記事をシェアする

このエントリーをはてなブックマークに追加

関連記事

Spotifyでフォローする

Meteoric Streamについて

運営者情報

開発を依頼したい

Windowsソフト、iPhoneアプリ、ゲーム音楽素材の「Meteoric Stream」 -> 資料室 -> Javascript/ActionScript/HTML/FLASH -> 【Javascript】すべてチェック/チェック解除の実装(name属性が「id[]」などの場合に対応)