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ランキング
-
XML画像データををHTMLで簡単に...
-
ホームページで画像を横に並べ...
-
IE6でヘッダーとイメージの間に...
-
floatさせたdtの内容が多い場合...
-
サムネイルをマウスオーバーす...
-
favicon.ico はもういらない?
-
CSS実装されない
-
CSSで画像配置の垂直方向指定
-
ホームページ製作において、テ...
-
cssのimgに2つ設定。
-
IEでの”a img”の枠線について
-
HTMLの画像を横に並べて表示の...
-
画像の横にテキスト
-
Dreamweaverで画像⇔画像のアン...
-
画像をリンクさせると紫の枠が...
-
画面上のテキスト位置を固定す...
-
リンクを知らせる手のマークが...
-
imgタグは何で囲むのが良いか
-
バナーの貼り方が、わかりません…
-
cssで、チェックボックスの画像...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
htmlで画像を2個ずつ並べていき...
-
機種依存文字、m2(平方メート...
-
HTMLタグのDL DT DDを使ってli...
-
画像の場合のみ、下線を消す方...
-
画像を縦に並べたら隙間ができ...
-
画像のサイズが変わらない
-
ポップアップウィンドウのサイ...
-
inputタグでサーバにデータを送...
-
HTMLでボタンを横に2つ並べる方法
-
【HTML/CSS】ボタンの枠が伸び...
-
リンクをつけた画像をクリック...
-
XML画像データををHTMLで簡単に...
-
レスポンシブ対応のHTML・CSS(...
-
UDP通信を使うチャットプログラ...
-
HTMLのIMAGEに。。
-
ホームページで画像を横に並べ...
-
画像をクリックして元に戻すには
-
リンクを選択したときの青い枠...
おすすめ情報