【コピぺOK】JavaScriptでラジオボタンとセレクトボックスを併用して転送先のURLを設定する方法!

 - 

 -  >

 -  Web Design

JavaScriptでラジオボタンとセレクトボックスを併用して、転送先のURLを変えるというのを実装したサイトを作る必要があったので、その方法を簡単に備忘録として書いておきます。

参考にしたサイトがこのようなサイトで、ラジオボタンだけ、セレクトボックスだけの方法は簡単に見つかりますが、併用してやる方法が書かれているサイトはありませんでしたので、備忘録としてそのやり方を書いておきます。

 

要件定義

まず、簡単にここの部分で必要な機能と、やるべきことを整理しておきます。

 

これだけなので、そこまで難しい実装ではありません。

 

 

 

行っている処理

まず、どのセレクトボックス・ラジオボタンがチェックされているかの情報を習得します。

その後は、ただひたすら条件分岐ですね。これとこれがチェックされてたらここに飛ばすよという設定をしているだけです。そして、最後にチェックされてなかったらアラートを出すという感じです。

 

実装例

これを実装しているのがこちらです。

赤のSの場合は楽天、Mの場合はAmazonに飛びます。ブルーのSだったらFacebookに、MだったらTwitterに飛ぶようになっているはずです。(フォローかいいねしてねw)

チェックをしてなかったらアラートが出るようになっています。

 

 

これを使えば、ショッピングサイトなどで、チェック状態によって飛ばしたい先のURLにユーザーを飛ばすことができます。

また、この転送先のURLにはWordPressのタグや、カスタムフィールドの内容も出力することができますので、この機能が必要になったらぜひ使ってみてください。

Facebookでシェアする

Twitterでシェアする

はてなブックマークに追加

 更新をチェックする! follow us in feedly

カスタム検索

Popular Post

Copyright© 新卒フリーランサーのブログ!2015 All Rights Reserved.