下記サイトを参照して、
「チェックボックスの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を探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
チェックボックスで画像を一括表示
-
Dreamweaver上とデバイスプレビ...
-
JavaScriptかPHPを使って表示枚...
-
MAX関数を使ってからLEFT JOIN...
-
画像のランダム表示、及び画像...
-
iframe内のリンクが飛ばないの...
-
フッター上部に謎の隙間
-
JSPでの画像ファイル表示
-
テキストエリア内の一部の文字...
-
jqueryで要素の中身を要素の外...
-
Ctrl+F(検索)の窓を出したいの...
-
「jQuery」アコーディオンメニ...
-
ダブルクォーテーションが消え...
-
WEBページ立ち上げ時に1回のみ...
-
外部javascriptの重複を防ぐには
-
jQueryでネスト構造の<li>がク...
-
表と裏がある1枚の画像を回転す...
-
複数の画像をフェードイン・ア...
-
jQueryでのドラッグアンドドロ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
画像をフェードアウト&フェー...
-
チェックボックスで画像を一括表示
-
[jQuery]bxSlider 一番最後と...
-
jsでグリッドデザインのサムネ...
-
【jQuery】2分割レイアウトで、...
-
liの数によってulの横幅を動的...
-
同一ページ内の複数のタグに同...
-
jqueryサブウィンドウにて画像...
-
神経衰弱 順番に裏返し
-
Javaスクリプトで画像を縦にス...
-
一定時間ごとに画像を切り替え...
-
横並びの画像を3枚時間差でフェ...
-
Javascriptを使用したスライド...
-
順番にクラスをつけていく方法
-
bxSliderのランダム表示について
-
html5に変えるとスライドショー...
-
エンドロールを枠の中で表示す...
-
javascriptで吹き出し
-
ご教授ください。
おすすめ情報