また１からこつこつと

最高はひとつじゃないと信じてまたがんばります。

<img>を押したら<input type="radio">を選択・不選択させたい

Web プログラミング

Webで画像が複数並んでおり、画像をタップしたらそれに対応するradioボタンが選択されるという処理を実装したかった。備忘録的にメモ。

imgタグにonclickを設定する

とりあえずベースとなるHTMLソースを

<!DOCTYPE html>
<html lang="ja">
<head>
　<meta charset="UTF-8">
　<title>dummy</title>
</head>

<body>
　<p>sample page</p>
　<img src="./image/sample01.png">
　<img src="./image/sample02.png">

　<form action="">
　　<input type="radio" name="selecter" value="1">サンプル1
　　<br>
　　<input type="radio" name="selecter" value="2">サンプル2
　　<br>
　　<input type="submit" value="送信">
　</form>
</body>
</html>

ここで、radioボタンを選択するのではなく、画像をクリックしたらそれに該当するradioボタンが選択されるという処理を書き加える。
はじめはどうやって作ろうかと思っていたけど、JavaScriptを使えば簡単だった。

まず、imgタグのonclick要素にJavaScriptの関数を設定する

<img src="./image/sample01.png" onclick="clicked('sample01')">
<img src="./image/sample01.png" onclick="clicked('sample02')">

この時にポイントなのが、関数の引数に対応するidをつけておく。これは何でもよいのだけど。
そして、JavaScriptでclicked()関数を定義する。

<script type="text/JavaScript">
　function clicked(sender){
　　if(sender == 'sample01'){
　　　document.getElementsByName('selecter')[0].checked = true;
　　}else if(sender == 'sample02'){
　　　document.getElementsByName('selecter')[1].checked = true;
　　};
　}
</script>

関数の引数の値によって条件分岐させている。
[0]とか[1]はradioボタンに対応しており、上から0番目、1番目...といった具合でついている。
（たぶんだけど、radioボタン配列みたいなものがあるんだとおもう）
そして、checkedの値をbool型で指定する。１つをtrueにしてしまえば他は自動的にfalseになる。

これで画像を押したときにradioボタンの値が自動的に変わってくれる。

やっぱりJavaScriptは慣れないなぁ
もう少し楽に書きたいわ