- ベストアンサー
チェックボックスで画像を一括表示する方法
- チェックボックスのON / OFFで画像を表示する方法と、全てのチェックボックスのON / OFFを切り替える方法を組み合わせて、全てのチェックボックスのON / OFFを切り替えて画像を一括表示することができます。
- ただし、全てのチェックボックスのON / OFFの切り替えに伴って画像の表示・非表示も反応するわけではありません。各チェックボックスのON / OFFでの画像の表示・非表示は可能です。
- 上記サイトを参考に、HTMLソースにチェックボックスのコードを追加してください。また、JavaScriptを使用してON / OFFの切り替えに応じて画像の表示・非表示を制御します。
- wgiq
- お礼率6% (1/15)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
あれこれ、なおしてたら、こうなっちゃった～！ すくりぷとがどうであれ、だいじなのは、てんたいのしゃしんだじょ！ いいしゃしん、いっぱいとってね。 ばぶぅ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="jp"> <head> <title>天体写真集</title> <style type="text/css"> h1 {margin-bottom:2ex; } .L { float:left; width:200px; background-color:#fee; } #PhotoList { margin-left:200px; } #PhotoList img { width:150px; height:150px; } </style> </head> <body> <h1>天体写真集</h1> <div class="L"> <FORM action="#" name="f1"> <ol> <li><input type="checkbox" name="c1" checked>朝焼に輝く星</li> <li><input type="checkbox" name="c1" checked>木立の隙間から</li> <li><input type="checkbox" name="c1" checked>夜明け</li> <li><input type="checkbox" name="c1" checked>自転を感じる</li> <li><input type="checkbox" name="c1" checked>昼の星空</li> <li><input type="checkbox" name="c1" checked>砂丘の月</li> <li><input type="checkbox" name="c1" checked>月の軌跡</li> <li><input type="checkbox" name="c1" checked>彗星の飛来</li> <li><input type="checkbox" name="c1" checked>彗星</li> <li><input type="button" value="全てOn"><input type="button" value="全てOff"></li> </ol> </FORM> </div> <div id="PhotoList"> <img src="photo01.jpg" alt="朝焼に輝く星"> <img src="photo02.jpg" alt="木立の隙間から"> <img src="photo03.jpg" alt="夜明け"> <img src="photo04.jpg" alt="自転を感じる"> <img src="photo05.jpg" alt="昼の星空"> <img src="photo06.jpg" alt="砂丘の月"> <img src="photo07.jpg" alt="月の軌跡"> <img src="photo08.jpg" alt="彗星の飛来"> <img src="photo09.jpg" alt="彗星"> </div> <script type="text/javascript"> document.onclick = function (evt) { var e = evt ? evt.target: event.srcElement; var n, t,p,c=0; if ('INPUT' == e.nodeName) { if ('c1' === e.name) { p = getParent(e, 'nodeName', 'LI'); n = childCount(p, 'nodeName', 'LI'); t = document.getElementById('PhotoList').getElementsByTagName('IMG')[n]; t.style.visibility = e.checked ? 'visible': 'hidden'; } if ('全てOn' == e.value) { p = document.getElementsByName('c1'); t = document.getElementById('PhotoList').getElementsByTagName('IMG'); while (n = p[c]) { n.checked = true; t[c++].style.visibility = 'visible'; } } if ('全てOff' == e.value) { p = document.getElementsByName('c1'); t = document.getElementById('PhotoList').getElementsByTagName('IMG'); while (n = p[c]) { n.checked = false; t[c++].style.visibility = 'hidden'; } } } }; function getParent (node, type, val) { return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function childCount (node, type, val) { var c = 0; while (node = node.previousSibling) if (node[type] == val) c++; return c; } </script>
その他の回答 (4)
- askaaska
- ベストアンサー率35% (1455/4149)
> 以下では動かないのですが・・これではだめなのでしょうか JavaScriptの部分何が変わったの？ 何も変わっていない様に見えるけど。 showを呼ばないと画像処理は走らないことはわかっているのよね？ 呼ぶように何も変わっていないじゃない。 ぶっちゃけ#2さんの言うとおりにやればできるはずよ。
- askaaska
- ベストアンサー率35% (1455/4149)
>> 単純に関数showで画像の切り替えのスクリプトを追加すれば良いのでしょうか？ まずはやってみる。 質問はそれから。
補足
すみません。いろいろやってみました・・・。 画像をデフォルト表示に変更しました。それはできたのですが・・・。 ▼以下では動かないのですが・・これではだめなのでしょうか？ <!-- function show(c,img){ if(document.f1.elements[c].checked == true){ document.getElementById(img).style.width=200; } else { document.getElementById(img).style.width=0; } } 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; } } // --> <HTML> <HEAD> <TITLE>天体写真集</TITLE> <script language="JavaScript" src="js/all.js"></script> <script language="JavaScript" src="js/basic.js"></script> </HEAD> <BODY> <H1>天体写真集</H1> <BR> <TABLE width=610 align=right border=0 cellspacing=0 celpadding=0> <TR><TD width=610> <IMG src="photo01.jpg" id="img01" style="width:200px"> <IMG src="photo02.jpg" id="img02" style="width:200px"> <IMG src="photo03.jpg" id="img03" style="width:200px"> <IMG src="photo04.jpg" id="img04" style="width:200px"> <IMG src="photo05.jpg" id="img05" style="width:200px"> <IMG src="photo06.jpg" id="img06" style="width:200px"> <IMG src="photo07.jpg" id="img07" style="width:200px"> <IMG src="photo08.jpg" id="img08" style="width:200px"> <IMG src="photo09.jpg" id="img09" style="width:200px"> </TD></TR> </TABLE> <FORM name="f1"> <INPUT type=checkbox name="c1" onClick="show(0,'img01')" checked>朝焼に輝く星<BR> <INPUT type=checkbox name="c1" onClick="show(1,'img02')" checked>木立の隙間から<BR> <INPUT type=checkbox name="c1" onClick="show(2,'img03')" checked>夜明け<BR> <INPUT type=checkbox name="c1" onClick="show(3,'img04')" checked>自転を感じる<BR> <INPUT type=checkbox name="c1" onClick="show(4,'img05')" checked>昼の星空<BR> <INPUT type=checkbox name="c1" onClick="show(5,'img06')" checked>砂丘の月<BR> <INPUT type=checkbox name="c1" onClick="show(6,'img07')" checked>月の軌跡<BR> <INPUT type=checkbox name="c1" onClick="show(7,'img08')" checked>彗星の飛来<BR> <INPUT type=checkbox name="c1" onClick="show(8,'img09')" checked>彗星<BR> <INPUT type=button value="全てOn" onClick="all_on(this.form.c1)"> <INPUT type=button value="全てOff" onClick="all_off(this.form.c1)"> </FORM> </BODY> </HTML>
- fujillin
- ベストアンサー率61% (1594/2576)
理由はNo1様の回答の通りです。 簡単に修正するなら、チェックボックスをセットした後で、 show(i,'img0' + (i+1)); とか…
- askaaska
- ベストアンサー率35% (1455/4149)
関数showで画像の切り替えを行っている、 これは判っているわね？ でも、 チェックボックスをクリックするときにしか呼び出していないわね。 「▼全てのチェックボックスのON / OFFを切り替えるJavaScript」 のときにも呼び出してあげないとダメよ。
補足
ありがとうございます！ 「全てのチェックボックスのON / OFFを切り替えるJavaScript」に 呼び出しを組み込む場合は、 単純に関数showで画像の切り替えのスクリプトを追加すれば良いのでしょうか？ JavaScriptの知識が乏しくて・・すみません・・。 宜しくお願いします。
お礼
大変助かりました。ありがとうございました！！