Feb 15: [Javascript] チェックボックスを全てチェック/解除する方法 この内容をはてなブックマークに追加 この内容をYahoo!ブックマークに登録 この内容をlivedoorクリップに登録 この内容をBuzzurlに登録

フォームでチェックボックスが複数あるとき使われる「一括チェック&解除」機能です。

方法はいろいろありますが、複数のチェックボックス名をPHPの配列で使いたい。
それで配列形式にしました。

チェックボックスを全てチェック/解除する方法

・HTML

<HTML>
<HEAD>
<TITLE>チェックボックスを全てチェック/解除する方法</TITLE>
<SCRIPT language="JavaScript">
chx = new Array("ch[0]","ch[1]","ch[2]","ch[3]","ch[4]","ch[5]");
function chkOnOff(){
    for(i=0i<chx.lengthi++) {
        document.lucenForm.elements[chx[i]].checked document.lucenForm.allChk.checked;
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="lucenForm">
All check<input type="checkbox" name="allChk" onclick="chkOnOff()"><br>
<INPUT type="checkbox" name="ch[0]">checkbox0
<INPUT type="checkbox" name="ch[1]">checkbox1
<INPUT type="checkbox" name="ch[2]">checkbox2<br>
<INPUT type="checkbox" name="ch[3]">checkbox3
<INPUT type="checkbox" name="ch[4]">checkbox4
<INPUT type="checkbox" name="ch[5]">checkbox5<br>
</FORM>
</BODY>
</HTML> 


・PHPでメンテナンスする場合

<?php
$chx_value "'ch[0]','ch[1]','ch[2]','ch[3]','ch[4]','ch[5]'";

print<<<LUCEN
<HTML>
<HEAD>
<TITLE>チェックボックスを全てチェック/解除する方法</TITLE>
<SCRIPT language="JavaScript">
chx = new Array({$chx_value});
function chkOnOff(){
    for(i=0; i<chx.length; i++) {
        document.xForm.elements[chx[i]].checked = document.xForm.allChk.checked;
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="xForm">
All check<input type="checkbox" name="allChk" onclick="chkOnOff()"><br>
<INPUT type="checkbox" name="ch[0]">checkbox0
<INPUT type="checkbox" name="ch[1]">checkbox1
<INPUT type="checkbox" name="ch[2]">checkbox2<br>
<INPUT type="checkbox" name="ch[3]">checkbox3
<INPUT type="checkbox" name="ch[4]">checkbox4
<INPUT type="checkbox" name="ch[5]">checkbox5<br>
</FORM>
</BODY>
</HTML>
LUCEN;
?>

Category: JavaScript | Posted by: lucen

Comments

Add Comment

このアイテムは閉鎖されました。このアイテムへのコメントの追加、投票はできません。