チェックボックスで画像を一括表示
下記サイトを参照して、
「チェックボックスのON / OFFで画像を表示する」
「全てのチェックボックスのON / OFFを切り替える」
を組み合わせて、
「全てのチェックボックスのON / OFFを切り替えて画像の一括表示」をしたいのですが、全てのチェックボックスのON / OFFの切り替えはできるのですが、それに伴って画像の表示・非表示までは反応しませんでした。各チェックボックスのON / OFFでの画像の表示・非表示は可能です。
http://iswebmag.hp.infoseek.co.jp/sample163.html
http://iswebmag.hp.infoseek.co.jp/sample164.html
▼htmlソースです。
<FORM name="f1">
<INPUT type=checkbox name="f1" onClick="show(0,'img01')">朝焼に輝く星<BR>
<INPUT type=checkbox name="f1" onClick="show(1,'img02')">木立の隙間から<BR>
<INPUT type=checkbox name="f1" onClick="show(2,'img03')">夜明け<BR>
<INPUT type=checkbox name="f1" onClick="show(3,'img04')">自転を感じる<BR>
<INPUT type=checkbox name="f1" onClick="show(4,'img05')">昼の星空<BR>
<INPUT type=checkbox name="f1" onClick="show(5,'img06')">砂丘の月<BR>
<INPUT type=checkbox name="f1" onClick="show(6,'img07')">月の軌跡<BR>
<INPUT type=checkbox name="f1" onClick="show(7,'img08')">彗星の飛来<BR>
<INPUT type=checkbox name="f1" onClick="show(8,'img09')">彗星
<BR>
<INPUT type=button value="全てOn" onClick="all_on(this.form.f1)">
<INPUT type=button value="全てOff" onClick="all_off(this.form.f1)">
</FORM>
▼チェックボックスのON / OFFで画像を表示するJavaScript
<SCRIPT language="JavaScript">
<!--
function show(c,img){
if(document.f1.elements[c].checked == true){
document.getElementById(img).style.width=200;
} else {
document.getElementById(img).style.width=0;
}
}
// -->
</SCRIPT>
▼全てのチェックボックスのON / OFFを切り替えるJavaScript
<SCRIPT language="JavaScript">
<!--
function all_on(chk){
for (i = 0; i < chk.length; i++) {
chk[i].checked = true;
}
}
function all_off(chk){
for (i = 0; i < chk.length; i++) {
chk[i].checked = false;
}
}
// -->
</SCRIPT>
