今月に入りJavaScriptの勉強を始めましたところ、
チェックボックスを使った画像の切り替えができなくて困っています。
具体的にはチェックボックスをチェックしたら画像を切り替えさせたいだけなのですが
対象画像一つに対してチェックボックスで切り替えることはできました。
しかし複数の画像にIDを割り当てて各々に対応するチェックボックスを
クリックすると画像を切り替えることができません。
勿論各々の画像毎に関数を追加していけば切り替えはできるのですが
一つの関数ですっきり収めたいのです。
作成したコードは以下に記しておきます。
どうかよろしくお願いいたします。
<script type="text/javascript">
function sample(imageID,checkbox) {
if (checkbox.checked) {
document.getElementById(imageID).src = "on.png";
} else {
document.getElementById(imageID).src = "on.png";
}
}
</script>
<img src="off.png" id="test1" alt="" />
<img src="off.png" id="test2" alt="" />
<form>
<input type="checkbox" onClick ="sample(test1','this')" />
<input type="checkbox" onClick ="sample(test2','this')" />
</form>
No.1ベストアンサー
- 回答日時:
>document.getElementById(imageID).src = "on.png";
elseの処理が「on.png」になってますがこれ「off.png」の間違いじゃ?
><input type="checkbox" onClick ="sample(test1','this')" />
シングルコーテーションの位置がおかしいです。
正解↓
<input type="checkbox" onClick ="sample('test1',this)" />
お恥ずかしながらご指摘の通りでした。
該当箇所を修正しましたところ正常に機能いたしました。
お早い回答本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
textareaに画像を表示したい
-
【早急】画像入れ替えJavaScrip...
-
1枚の画像をクリックして複数の...
-
画像ランダム表示、しかしダブ...
-
キャッシュされた画像を使わず...
-
透過pngの透明部分以外をクリッ...
-
JAVASCRIPTでアクセス毎に画像...
-
javascriptテキストBOX色を元に...
-
テキストエリア内の一部の文字...
-
フッターの下に隙間ができてしまう
-
HTMLですCSSです この画像のよ...
-
背景色と連動するスライドショ...
-
スライドショー「Skitter」をカ...
-
web制作(HP作成について教えて...
-
HTMLタグに複数のクラスを設定...
-
スワップイメージのフェード方...
-
アコーディオンメニューが開い...
-
サムネイルにカーソルを合わせ...
-
大量のチェックボックス状態取...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascript で共通の処理をどこ...
-
Javascriptで指定した日付と時...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
1枚の画像をクリックして複数の...
-
画像ランダム表示、しかしダブ...
-
スライダーを実装した場合、ペ...
-
1枚の画像をクリックすると複数...
-
HTMLで条件分岐はできますか?
-
JavaScript スライドの画像にリ...
-
オンマウスで、画像切り替え+...
-
画像の重なりの順序を代える方...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
画像をドラッグ&ドロップで移...
-
各フォルダから1枚ずつ画像をラ...
-
jQueryで特定のURLの時のみ表示
-
bxsliderにて読み込み後に内容...
-
prettyphotoの画像表示について
-
WEBページ立ち上げ時に1回のみ...
おすすめ情報