jQueryを利用して一定の画像からリンクした場合、リンク先のチェックボックスにチェックを入れて表示する。(MW_WP_Form) Q&A

Question

前提・実現したいこと

index.phpにある画像から飛んだ先にあるお問い合わせページに飛んだ際に、お問い合わせページのチェックボックスの1つ目にチェックを入れた状態で表示したい。
また、その他のaタグ等でリンクしたボタンから表示した場合は、チェックを入れずに通常通り表示したい。

画像から飛んだ場合の表示↓

それ以外のリンクから飛んだ場合の表示↓

過去似たような内容で質問されている方がいらっしゃいましたので、ご参考までに↓
https://teratail.com/questions/114763

発生している問題・エラーメッセージ

・MW WP Formをショートコードで呼び出しているのですが、それが原因でjqueryが効かないっぽい(?)
・チェックは入るが、どのリンクから飛んでもチェックをされてしまう。

該当のソースコード

<!--index.phpです。-->
<!--通常のリンクボタンです。-->
<a href="<?php echo home_url('contact'); ?>" target="_blank">お問い合わせ</a>

<!--リンク先のチェックボックスオンにさせる場合のリンク画像です。-->
<form method="post" action="<?php echo home_url('contact');?>" target="_blank">
      
      <input id="banner" type="image" src="<?php echo get_template_directory_uri(); ?>/img/linkimg.jpg" alt="">
    
</form>


<?php
get_footer();

<!--page-contact.phpです。-->

<?php　
get_header(); ?>

　<?php echo do_shortcode('[mwform_formkey key="1"]'); ?>

<?php
get_footer();

<!--page-contact.phpでショートコードで呼び出すMW_WP_Formの記述です。-->

<dl>
<dt>内容</dt>
<dd>
[mwform_checkbox name="内容" id="selecter1" children="a" ]
[mwform_checkbox name="内容" id="selecter2" children="b" ]
[mwform_checkbox name="内容" id="selecter3" children="c" ]
[mwform_checkbox name="内容" id="selecter4" children="d" ]
[mwform_checkbox name="内容" id="selecter5" children="e" ]
[mwform_checkbox name="内容" id="selecter6" children="f"]
[mwform_checkbox name="内容" id="selecter7" children="g" ]
</dd>
</dl>

<!--footer.phpです。-->

<script>
jQuery(function($){
	$("#banner").on('click',function(){
		 $("#selecter1-1").prop('checked',true);
	});
});
</script>
//なぜかブラウザで見ると#selecter1が#selecter1-1で表示されるため上記のように指定しています。

有識者の方いらっしゃいましたら、お力添えお願い致します。

Comments

[yambejp]

「画像から飛んだ」の意味がわかりません。
<input type="img">を押してsubmitされたときの話でしょうか？

[makimaki_119]

返信遅れてしまい申し訳ないです。
その解釈で間違いありません。

[yambejp]

画像からsubmitしたとき画像.xと画像.yが送られてくるので
それをチェックしたのが私の回答ですが、想定と違いますか？

[makimaki_119]

何度も説明不足で申し訳ないです。想定と違いました。
http://example.com/contactという問い合わせのディレクトリに対して２種のアクセス方法を設けています。
1つは通常のaタグからのリンク、もう一つが画像をクリックして繋ぐリンクです。この画像からリンクした場合のみ、/contactの中身であるチェックボックスの1つ目にチェックを入れたいという内容でした。

Answer 1

<script>
const flg=/(?:?|&)(.+?).x=\d+&\1.y=\d+?(?=&|$)/.test(location.search);
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('[type=checkbox]').checked=flg;
});
</script>
<form>
<input type="submit" name="x" value="submit">
<input type="image" name="img" src="sample.jpg">
</form>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

Answer 2

色々やり方はありそうだけど、リファラを参照するとか

if ( document.referrer == 'http://www.example.com/' )
  $("#selecter1-1").prop('checked',true); // http://www.example.com/ から遷移してきた時だけ実行

Comments

[makimaki_119]

コメントありがとうございます。返信遅れて申し訳ないです。
試してみましたが、上手く通りませんでした。
指定方法に問題があるかもしれませんが、リファラのアドレスを
'http://www.example.com/#banner'
で指定しました。
こちらだと間違えていますでしょうか？

[yuki84web]

console.log(document.referrer);で遷移元取得すると、どうなりますか？

[makimaki_119]

jQuery(function($){
console.log(document.referrer);{
$("#selecter1-1").prop('checked',true);
　}
});

↑でチェックの取得できました！
ただすべてのリンクから適応されてしまっているので、指定方法少し工夫してみます。

[yuki84web]

遷移元からアクセスした時にconsole.logでURLがコンソールに出力されるはずです。
なのでそれをif文のdocument.referrer条件式に書いてください。