チェックボックスを使った背景色変更例
先頭のボックスをチェックしないと、以降のチェックができない。
先頭のチェックを外すと、以降のチェックも外れる。
赤緑青を組み合わせて色を指定できる。
実行結果
ヘッダ部分
<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>