チェックボックスを使った背景色変更例

先頭のボックスをチェックしないと、以降のチェックができない。
先頭のチェックを外すと、以降のチェックも外れる。
赤緑青を組み合わせて色を指定できる。
実行結果
変更する


ヘッダ部分
<SCRIPT LANGUAGE="JavaScript">
function checkBack(form)	{
	if(form.back.checked == false)	{
		for(i=1 ; i<form.length-1 ; i++)	{
			form.elements[i].checked=false
		}
	}
}

function colChange(form)	{
	if(form.back.checked)	{
		if(form.red.checked && form.green.checked && form.blue.checked)	{
			document.bgColor="#ffffff"
		}
		else if(form.red.checked && form.green.checked)	{
			document.bgColor="#ffff00"
		}
		else if(form.red.checked && form.blue.checked)	{
			document.bgColor="#ff00ff"
		}
		else if(form.green.checked && form.blue.checked)	{
			document.bgColor="#00ffff"
		}
		else if(form.red.checked)	{
			document.bgColor="red"
		}
		else if(form.green.checked)	{
			document.bgColor="green"
		}
		else if(form.blue.checked)	{
			document.bgColor="blue"
		}
		else	{
			document.bgColor="#000000"
		}
	}
	else	{
		alert("\nまず[変更する]をチェックしてください。")
	}
}
</SCRIPT>

ボディ部分
<FORM>
<INPUT TYPE="checkbox" NAME="back" CHECKED onClick="checkBack(this.form)">変更する
<INPUT TYPE="checkbox" NAME="red" onClick="checkBack(this.form)">赤
<INPUT TYPE="checkbox" NAME="green" onClick="checkBack(this.form)">緑
<INPUT TYPE="checkbox" NAME="blue" onClick="checkBack(this.form)">青
<INPUT TYPE="button" NAME="change" VALUE="背景変更" onClick="colChange(this.form)">
</FORM>