【HTML】ラジオボタンでどちらか片方にチェックを入れる方法

ラジオボタンを作成した後に試しにチェックが入るかどうかクリックしてみたら、全てのラジオボタンにチェックが残ってしまうことがあります。

こういう場合結論としてはinputタグの中のname属性に同一の値を入れれば片方だけにチェックをつけられる状態にすることができます。

ラジオボタンでどちらか片方にチェックを入れる方法

See the Pen Untitled by Takuma (@takushin0202) on CodePen.

inputのname属性に”gender”という値をそれぞれのname属性に入れています。値を同一にすることで片方にチェックが入る状態にすることができました。

もちろんname属性の値は仮で”gender”と置いてるだけなので、最終的には何かしらのフォームへ送信するための値が入ることになりますが、そこまでまだ学習したことがない人にとって参考になれば幸いです。