ラジオボタンを一つだけ選択できるようにする

お問い合わせフォームなどに設置することが多いラジオボタン。
複数のラジオボタンから、一つだけを選択できるようにする方法についてご紹介します。

ラジオボタンの設置法

まずはラジオボタンの作り方から。
最初にinputタグを用意します。
inputタグ内に下記属性の値を挿入します。

type属性

type属性にradioを指定することで、ラジオボタンを生成します。

<input type="radio">

name属性

name属性に指定した値が部品名になります。

<input type="radio" name="部品名">

value属性

value属性に指定した文言が送信されます。

<input type="radio" name="部品名" value="ここに書いた内容が送信されます">

一つだけ選択できるラジオボタン

ラジオボタンを複数設置した際に、その中から一つだけを選択できるようにするには少しだけ工夫が必要です。

すべて同じname属性にする

ラジオボタンを一つだけ選択できるようにするには、すべてのラジオボタンのname属性を同じにしましょう。
これだけで、ラジオボタンを一つだけ選択できるようになります。

<form>
　<div class="radio-wrap">
　　<input type="radio" name="test" value="テスト1">テスト1
　　<input type="radio" name="test" value="テスト2">テスト2
　　<input type="radio" name="test" value="テスト3">テスト3
　</div>
</form>

See the Pen
Untitled by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.