No.2ベストアンサー
- 回答日時:
別の環境でやったらlabelがうまく動かなかった
ので、訂正します。
<form>
<span style="display:none"><input type="radio" name="radio1" id="radio1_1" value="1" onClick="radiochange(this.value)"></span>
<span onClick="document.getElementById('radio1_1').click()"><img src="off.gif" id="img1_1">項目1</span><br>
<span style="display:none"><input type="radio" name="radio1" id="radio1_2" value="2" onClick="radiochange(this.value)"></span>
<span onClick="document.getElementById('radio1_2').click()"><img src="off.gif" id="img1_2">項目2</span><br>
<span style="display:none"><input type="radio" name="radio1" id="radio1_3" value="3" onClick="radiochange(this.value)"></span>
<span onClick="document.getElementById('radio1_3').click()"><img src="off.gif" id="img1_3">項目3</span><br>
</form>
<script language="javascript">
function radiochange(num){
var objimg=new Array;
objimg["1"]=document.getElementById('img1_1');
objimg["2"]=document.getElementById('img1_2');
objimg["3"]=document.getElementById('img1_3');
for (var i in objimg){
objimg[i].src="off.gif";
}
objimg[num].src="on.gif";
}
</script>
No.1
- 回答日時:
データの管理方法から考えて、radioを隠してつかう
のが妥当でしょう。
onclickでonに変更することは簡単ですが、offにする
のがめんどうですネ。
総じてこんな風になるのでしょうか…
(仰々しくてすみません)
<form>
<span style="display:none"><input type="radio" name="radio1" id="radioa" value="a" onClick="radiochange(this.value)"></span>
<label for="radioa"><img src="off.gif" id="imga">aaa</label><br>
<span style="display:none"><input type="radio" name="radio1" id="radiob" value="b"
onClick="radiochange(this.value)"></span>
<label for="radiob"><img src="off.gif" id="imgb">bbb</label><br>
<span style="display:none"><input type="radio" name="radio1" id="radioc" value="c"
onClick="radiochange(this.value)"></span>
<label for="radioc"><img src="off.gif" id="imgc">ccc</label><br>
</form>
<script language="javascript">
function radiochange(num){
var objimg=new Array;
objimg["a"]=document.getElementById('imga');
objimg["b"]=document.getElementById('imgb');
objimg["c"]=document.getElementById('imgc');
for (var i in objimg){
objimg[i].src="off.gif";
}
objimg[num].src="on.gif";
}
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(パソコン・スマホ・電化製品) Canvaアプリの使い方 2 2022/05/28 23:18
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- ノートパソコン Snipping Toolで切り取った画像への、(きれいな)丸の入れ方を教えて下さい 5 2023/04/02 17:24
- その他(ブラウザ) Mycrosoft Edge の「コレクション」に、画像とテキストを追加したい 2 2022/05/28 11:10
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- 防犯カメラ・監視カメラ・小型カメラ Windowsのカメラ機能。設定した通りのfpsでの撮影ができず、コマ落ち動画になる。修正するには? 2 2023/01/29 09:50
- LINE スマホを替えてから、LINEの画像が表示されなくなりました 1 2022/10/04 13:41
- 画像編集・動画編集・音楽編集 このようなスクリーンキャプチャソフトありますか? 3 2023/01/31 16:02
- 掃除機・クリーナー・空気清浄機 Dysonの掃除機DC26をもってるのですが、先日間違えて画像のモーターヘッドを購入してしまいました 2 2023/01/01 09:39
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
UDP通信を使うチャットプログラ...
-
HTMLのIMAGEに。。
-
html+CSSのみで作るスライドショー
-
画像のサイズが変わらない
-
XML画像データををHTMLで簡単に...
-
jqueryの画像切り替え
-
画像をクリックして同じページ...
-
ポップアップウィンドウのサイ...
-
画像をラジオボタンとして使用...
-
favicon.ico はもういらない?
-
inputタグでサーバにデータを送...
-
cssで画像を均等に配置する方法...
-
ulの画像をcssのfloatで横並び...
-
CSS側で、リンク画像を小するに...
-
画像をリンクさせると紫の枠が...
-
画像の横にテキスト
-
auの携帯サイトで画像と画像の...
-
ボタンをセル内一杯に表示させ...
-
CGI(更新記録)で写真の上にロゴ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
UDP通信を使うチャットプログラ...
-
XML画像データををHTMLで簡単に...
-
【HTML/CSS】ボタンの枠が伸び...
-
リンクを選択したときの青い枠...
-
favicon.ico はもういらない?
-
CSSの左横に隙間ができてしまい...
-
table で画像をピッタリとくっ...
-
HTMLのIMAGEに。。
-
画像とテーブルの隙間をなくす。
-
HTMLは、シングルクォートかダ...
-
ホームページで画像を横に並べ...
-
リンクをつけた画像をクリック...
-
サムネイルをマウスオーバーす...
-
縦長広告をウェブページの右側...
-
c言語を用いて画像の透明度をあ...
おすすめ情報