読者です 読者をやめる 読者になる 読者になる

また1からこつこつと

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

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

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型で指定する。1つをtrueにしてしまえば他は自動的にfalseになる。

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

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