![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
下記サイトを参照して、
「チェックボックスの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>
No.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>
No.4
- 回答日時:
> 以下では動かないのですが・・これではだめなのでしょうか
JavaScriptの部分何が変わったの?
何も変わっていない様に見えるけど。
showを呼ばないと画像処理は走らないことはわかっているのよね?
呼ぶように何も変わっていないじゃない。
ぶっちゃけ#2さんの言うとおりにやればできるはずよ。
No.3
- 回答日時:
>> 単純に関数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>
No.1
- 回答日時:
関数showで画像の切り替えを行っている、
これは判っているわね?
でも、
チェックボックスをクリックするときにしか呼び出していないわね。
「▼全てのチェックボックスのON / OFFを切り替えるJavaScript」
のときにも呼び出してあげないとダメよ。
この回答への補足
ありがとうございます!
「全てのチェックボックスのON / OFFを切り替えるJavaScript」に
呼び出しを組み込む場合は、
単純に関数showで画像の切り替えのスクリプトを追加すれば良いのでしょうか?
JavaScriptの知識が乏しくて・・すみません・・。
宜しくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスで画像を一括表示
-
Slick.jsのオプションrtlについて
-
high slideをFC2ブログで
-
bxsliderでスライドショーの間...
-
以前、ロールオーバー効果につ...
-
MAX関数を使ってからLEFT JOIN...
-
jqueryのsortableで一部ソート...
-
iframe内のリンクが飛ばないの...
-
javascriptでオブジェクトの重...
-
読み込んだQRコードをフォーム...
-
背景色を透明化
-
javascriptテキストBOX色を元に...
-
CSS 可変マージン
-
ダブルクォーテーションが消え...
-
JAVAで画像をボタンで切り替え...
-
CSSで指定したwidthをマウスで...
-
JSPでの画像ファイル表示
-
jQueryで同じクラス名のものを...
-
jspでcssが読み込めない
-
マウスオーバーで開閉できるア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
【iOS及びAndroid】リンク画像...
-
複数の要素へ appendchild でき...
-
キャラクターがぴょこんと飛び...
-
[jQuery]bxSlider 一番最後と...
-
qtipの使い方について
-
jQuery bxSlider でのアニメー...
-
横並びの画像を3枚時間差でフェ...
-
画像をフェードアウト&フェー...
-
javascriptで吹き出し
-
スライドショーの画像にリンク...
-
javascriptで文字サイズの変更
-
スライド機能について
-
順番にクラスをつけていく方法
-
自動でスライドし、伸び縮みす...
-
html内でのマウスオーバー時に...
-
CSSでマウスオーバーした画像を...
-
チェックボックスと画像切替の連動
-
high slideをFC2ブログで
おすすめ情報