要素の絞り込み選択状態でリンク

Question

前提・実現したいこと

https://www.wan55.co.jp/files/user/column/column447/
こちらのページのようなhtmlを制作しています。

例えばA.html 内にある 「哺乳類」テキストから上記のページへリンクさせたときに
「哺乳類」が選択されたままかつ、哺乳類が表示された状態でリンクさせたいのですが、
そのようなことは可能でしょうか。

なかなかうまくいかず困っております。
ご教授ください。お願いします。

Answer 1

たとえば「?chk=01」とか「?chk01=1」などつけるような仕様にして
location.searchからgetのパラメータを取得・解釈してチェックを
付加するようにすればよいでしょう

sample

ちょっとパラメータは調整しました

<script>
$(function(){
  var params={};
  if(location.search.length>0){
    location.search.substring(1).split('&').forEach(function(x){
      var y=x.split("=");
      params[y[0]]=y[1];
    });
  }
  (params["checked"]||"").split("+").forEach(function(x){
    $('#chk'+x).prop('checked',true);
  });

});
</script>
<label><input type="checkbox" id="chk01">01</label>
<label><input type="checkbox" id="chk02">02</label>
<label><input type="checkbox" id="chk03">03</label>
<hr>
<a href="?checked=01">1をチェック</a><br>
<a href="?checked=02+03">2,3をチェック</a><br>
<a href="?checked=01+02+03">全部チェック</a><br>

Comments

[退会済みユーザー]

早速くわしくありがとうございます。ありがたいです！

もう少し教えていただいてもよろしいでしょうか。
うまく動かないのです。

チェックは入るようになりましたが、
表示が出ません。

例えば
https://www.wan55.co.jp/files/user/column/column447/

こちらのページですと
「哺乳類」が選択されたままかつ、哺乳類が表示された状態で表示させたいのです。

現在は「哺乳類」チェックボックスにチェックは入りますが
「哺乳類」のみの表示はされないです・・。

Answer 2

URLのパラメータやハッシュなどを利用するといいでしょう。
こちらにサンプルがあったので参考にしてみては？
JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法 ｜ Tips Note by TAM