ラジオボタンにリンクを設置する方法

フォームのラジオボタンにリンクを設置して、クリックした際に指定した URL に移動させる方法を紹介します。

以下、簡単なコードで実装できます。
ラジオボタンに JavaScript の［onclick］要素を追加して、［value］で指定した URL にリンクさせる仕組みになっています。

ラジオボタンのクリックでリンクを開く

<form>
<input type="radio" id="radio-01" value="https://on-ze.com" onclick="location.href=this.value"><label for="radio-01">https://on-ze.com</label>
</form>

このやり方だとリンク先のページを同ウィンドウで開きますが、もし別ウィンドウ開く［target="_blank"］と同じ挙動にさせたいなら、［window.open］を使います。
具体的なコードは以下。

ラジオボタンのクリックで別ウィンドウでリンクを開く

<form>
<input type="radio" id="radio-02" value="https://on-ze.com" onclick="window.open(href=this.value);return false;"><label for="radio-02">https://on-ze.com</label>
</form>

サンプルも用意しましたのでご確認ください。

ラジオボタンにリンクを設置する方法：サンプル・デモ