チェックボックスで画像を一括表示

解決済

質問者：wgiq
質問日時：2009/07/03 13:05
回答数：5件

下記サイトを参照して、
「チェックボックスの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">

</SCRIPT>

▼全てのチェックボックスのON / OFFを切り替えるJavaScript
<SCRIPT language="JavaScript">

</SCRIPT>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： babu_baboo
回答日時：2009/07/03 19:38

あれこれ、なおしてたら、こうなっちゃった～！

すくりぷとがどうであれ、だいじなのは、てんたいのしゃしんだじょ！
いいしゃしん、いっぱいとってね。
ばぶぅ。

<!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>

- 0
- 件

通報する

この回答へのお礼

大変助かりました。ありがとうございました！！

通報する

お礼日時：2009/07/06 15:36

No.4

回答者： askaaska
回答日時：2009/07/03 18:50

> 以下では動かないのですが・・これではだめなのでしょうか

JavaScriptの部分何が変わったの？
何も変わっていない様に見えるけど。

showを呼ばないと画像処理は走らないことはわかっているのよね？
呼ぶように何も変わっていないじゃない。

ぶっちゃけ#2さんの言うとおりにやればできるはずよ。

- 0
- 件

通報する

No.3

回答者： askaaska
回答日時：2009/07/03 15:09

>> 単純に関数showで画像の切り替えのスクリプトを追加すれば良いのでしょうか？

まずはやってみる。
質問はそれから。

この回答への補足

すみません。いろいろやってみました・・・。
画像をデフォルト表示に変更しました。それはできたのですが・・・。

▼以下では動かないのですが・・これではだめなのでしょうか？


<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>