読者です 読者をやめる 読者になる 読者になる

サーバー構築メモ

サーバーを構築したりWEBサイトを作ったりした際の個人的な備忘録です

Javascript フォームのチェックボックスを全選択するボタンを作成する

フォームのチェックボックスを全選択するボタンを作成する

「Javascript部分」

function allcheck(targetForm,flag){
 for(n=0;n<=targetForm.length-1;n++){
  if(targetForm.elements[n].type == "checkbox"){
   targetForm.elements[n].checked = flag;
  }
 }
}

「HTML部分」

<form action="test.cgi" method="post">
<input type="checkbox" name="fruits" value="apple">りんご
<input type="checkbox" name="fruits
" value="orange">オレンジ
<input type="checkbox" name="fruits" value="banana">バナナ
<input type="checkbox" name="fruits
" value="melon">メロン
<input type="checkbox" name="fruits[]" value="peach">桃
<input type="button" value="全選択" onClick="allcheck(this.form,true)">
<input type="button" value="全解除" onClick="allcheck(this.form,false)">
<input type="submit" value="送信">
</form>

サンプルはこちら。