
こんにちは!WEBデザイナーのこたです。
皆さんはフォームでラジオボタンを設置した際に、少し変わった機能を実装してほしいと要望されたことはありませんか?
先日対応した案件でこのような実装がありました。
(1)リンクボタンを2つ用意し、ボタンを押すとフォームに飛ばす。
(2)その際にリンクボタンごとでフォーム内のラジオボタンを連動し、チェック選択させる。
例えば、セミナーのランディングページで「セミナー参加」と「資料の請求」の2つのリンクボタンとラジオボタンを用意し、「セミナー参加」を押した際にラジオボタンの「セミナー参加」もチェックされるという例になります。
意外とよくありそうだけど、ネットで検索しても該当例がヒットしなかったため、同じ悩みを抱えた人に向けて紹介したいと思いました。
今回はjQueryで簡単に実装できる「リンクボタンを押してラジオボタンの選択を連動させる」方法についてご紹介します。
実装方法
まずはデモからご覧ください。
青色の「セミナーに参加する」ボタンを押すと、下の「セミナーに参加する」のラジオボタンにチェックが入ります。
同様に黒色の「資料請求」ボタンを押すと「資料請求」のラジオボタンにチェックが入るようになっています。
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
入力コードの説明
- jQueryを読み込む
- HTMLでリンクボタンにclass[radio1/radio2]をそれぞれ設定する
- jQueryでクリックイベントを設定する
① jQueryを読み込む
まずはjQueryをHTML内に読み込みます。
CDNを使えばダウンロードせずに楽に設定できます。
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
② HTMLでリンクボタンにclass[radio1/radio2]をそれぞれ設定する
それぞれのリンクボタンに「radio1」「radio2」を設定します。
こちらは好きなクラス名に変更可能です。その場合は③で設定するjQueryのクラス名も変更が必要になるので、注意してください。
<a href="#contact_jump" class="base_btn blue radio1">セミナーに参加する</a>
<a href="#contact_jump" class="base_btn black radio2">資料請求</a>
③ jQueryでクリックイベントを設定する
②で設定したクラス名「radio1」と「radio2」のそれぞれのクリックイベントを作成します。
コードの内容としては、「radio1」をクリックしたときにイベントが発生し、ラジオボタン ([name='種類'][value='セミナーに参加する']
)が一致するものをチェックするという動作になります。
また、今回はラジオボタンで設定しているため、「radio2」が選択されたときに自動的に「radio1」のチェックは外れる仕組みになります。
$('.radio1').click(function() {
document.querySelector("input[type='radio'][name='種類'][value='セミナーに参加する']").checked = true;
});
$('.radio2').click(function() {
document.querySelector("input[type='radio'][name='種類'][value='資料請求']").checked = true;
});
まとめ
いかがでしょうか?
意外と簡単でしたよね。jQueryを使うだけなので、Web制作初心者の方にも実装しやすい内容だと思います。
jQueryのクリックイベントは他の実装でもよく使われるので覚えておくといいですよ!
また、今回はライオボタンでしたがチェックボックス などにも応用が効くので、内容によって変えてみてください、