【Javascript】すべてチェック/チェック解除の実装（name属性が「id[]」などの場合に対応）
INPUTタグで生成したチェックボックスのname属性が、「test[]」、「id[]」など、英数字以外の記号や文字列を含んでいる場合で、「すべてチェック」や「すべてのチェックを外す」の動作をJavascriptで実装する方法です。（説明がややこしいw）
Javascriptで、「すべてチェック」や「すべてのチェックを外す」を実装すること自体は、document.フォーム名.ラジオボタンの名前[配列数].checkedを、trueにしたり、falseにしたりすれば問題ありません。
それに加えて、ラジオボタンの名前に英数字以外が含まれている場合は、「elements[ラジオボタンの名前]」を呼び出します。
下記、サンプルコードです。
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>
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
インターネット黎明期から運営している生きる化石、Meteoric Streamへようこそ！
