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

Ads by Google

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

以下、簡単なコードで実装できます。

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

ラジオボタンに JavaScript の[onclick]要素を追加して、[value]で指定した URL にリンクさせる仕組みになっています。

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

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

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

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です