こんにちは！
今回はページ内リンクをクリックしたときにラジオボタンにチェックを入れるやり方を紹介します。
labelタグはforにinputタグのidを同名にすることで紐づけることが可能ですが、
aタグのやり方はみつからなかったので、jQueryでしてみたので、今回解説します。
目次
実装の流れ
使うシーンとしましては
- ページ内リンクの項目と連動して、お問合せの項目も連動してチェックを入れたい
完成のコードはこちら
See the Pen ページ内スクロール&チェック by yoppi (@yoppi) on CodePen.
$(this).attr('id');今回でいうとaタグをクリックしたときにaタグのidを取得するために「attr」を使用します。
radio.each((index,element)=>{
let contact_item = element.value; //value値を取得
console.log(contact_item)
if(contact_item == click_item){ //value値とクリックしたaタグのid名が一緒の場合
element.checked = true; //チェックを入れる
}
});
次にラジオボタンをjQueryメソッドでeachメソッドで1つずつラジオボタンの情報を繰り返し処理します。
id名とvalue値が同名のときのみ、ラジオボタンにチェックを入れます。
let time = 500;
let target = $(this.hash);
if (!target.length) return;
let targetY = target.offset().top;
$('html,body').delay(300).animate({ scrollTop: targetY }, time, 'swing');
return false;その下にページ内リンクの処理を書きます。
以上になります。