特定要素に特定クラスがついている場合のみチェックボックスにcheckedを付与したい

Question

###やりたいこと
サイトメニューにて、input, label, CSSで制御しているアコーディオンメニューを作っています。
カレントページを表示中の時に、該当するメニューにclass="current"の付与を与えることに成功したのですが、class="current"がついている時には該当のチェックボックス <input id="accSP-subOpen-home" class="acc-subOpen" type="checkbox">にcheckedを付与してアコーディオンを最初から開いた状態にしたいのですが、自分の記述ではなんの変化もなく、checkedは付与さえません。

###コード一覧

<div id="mainNavBox">
<ul class="contents">
  <li class="item">
    <input id="accSP-subOpen-home" class="acc-subOpen" type="checkbox">
    <label class="acc-unshown" for="accSP-subOpen-home">Home</label>
    <ul class="subNav">
      <li><a href="top.html">トップページ</a></li>
      <li><a href="news.html">お知らせ一覧</a></li>
      <li><a href="release.html">リリースノート一覧</a></li>
    </ul>
  </li>
  <li class="item">
    <input id="accSP-subOpen-home" class="acc-subOpen" type="checkbox">
    <label class="acc-unshown" for="accSP-subOpen-home">マイページ</label>
    <ul class="subNav">
      <li><a href="profile.html">プロフィール</a></li>
      <li><a href="keiyaku.html">契約状況</a></li>
    </ul>
  </li>
</ul>
</div>

.mainNavBox {
  background-color: #23282d;
  position: fixed;
    max-width: 200px;
  width: 100%;
  height: 100%;
}
.mainNavBox ul.contents { margin: 12px 0; }
.mainNavBox ul.contents>li.item {
  min-height: 34px;
  position: relative;
}
.mainNavBox ul.contents>li.item>a,
.mainNavBox ul.contents>li.item>label,
.mainNavBox ul.contents>li.item>ul.subNav>li>a {
  cursor: pointer;
  color: #eee;
  display: block;
  font-size: 1.4rem;
  line-height: 1.3;
  padding: 9px 15px;
}
  .mainNavBox ul.contents>li.item>a:hover,
  .mainNavBox ul.contents>li.item>label:hover,
  .mainNavBox ul.contents>li.current>a,
  .mainNavBox ul.contents>li.current>label { background-color: #fd8a39; }

/*=============== ul.subNab/// accordion ===============*/
.mainNavBox ul.contents>li.item>input.acc-subOpen { display: none; }
.mainNavBox ul.contents>li.item>label.acc-unshown {
  display: block;
  margin-bottom: 1px;
}
.mainNavBox ul.contents>li.item>ul.subNav {
  height: 0;
  opacity: 0;
  visibility: hidden;
}
.mainNavBox ul.contents>li.item>ul.subNav>li {}
.mainNavBox ul.contents>li.item>ul.subNav>li>a {
  color: rgba(240,245,250,.7);
  font-size: 1.3rem;
  line-height: 1.4;
  padding: 6px 12px;
}
  .mainNavBox ul.contents>li.item>ul.subNav>li>a:hover { color: #fd8a39; }
  .mainNavBox ul.contents>li.item>ul.subNav>li.current>a { color: #fff; }

.mainNavBox ul.contents>li.item>input.acc-subOpen:checked + label.acc-unshown + ul.subNav {
  background-color: #32373c;
  height: auto;
  opacity: 1;
  padding: 7px 0 8px;
  visibility: visible;
}
/*---------- accordion/// icon ----------*/
.mainNavBox ul.contents>li.item>label.acc-unshown::after {
  display: block;
  line-height: 2;
  height: 34px;
  width: 34px;
    top: 0;
    right: 0;
  position: absolute;
    -webkit-transition: all 0.35s;
  transition: all 0.35s;
  text-align: center;
}
.mainNavBox ul.contents>li.item>input.acc-subOpen[type=checkbox] + label::after {
  content: '+';
}
.mainNavBox ul.contents>li.item>input.acc-subOpen[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}

//メニュー現在地点の設定
$(function(){
  $('.mainNavBox ul li a').each(function(){
    var $href = $(this).attr('href');
    if(location.href.match($href)) {
      $(this).parent().addClass('current');
      $(this).parent().parent().parent().addClass('current');
    } else {
      $(this).parent().removeClass('current');
    }
  });
});

###やってみたこと
以下、いろいろ調べたものを記述したのですがjQueryへの知識が浅いため見当違いなことをしているのかもしれません。

//current-open
$(function(){
  $('.acc-subOpen').change(function() {
    if ($('li.current').prop("checked")) {
      $('li.current').prop("checked", true);
    } else {
      $('li.current').prop("checked", false);
    }
  });
});

###見た目
現在

目標

以下、クラス名が付与されている様子

<div id="mainNavBox">
<ul class="contents">
  <li class="item current">
    <input id="acc-subOpen-home" class="acc-subOpen" type="checkbox">
    <label class="acc-unshown" for="acc-subOpen-home">Home</label>
    <ul class="subNav">
      <li class="current"><a href="./top.html">トップページ</a></li>
      <li><a href="#">お知らせ一覧</a></li>
      <li><a href="#">リリースノート一覧</a></li>
    </ul>
  </li>
  <li class="item">
    <input id="accSP-subOpen-home" class="acc-subOpen" type="checkbox">
    <label class="acc-unshown" for="accSP-subOpen-home">マイページ</label>
    <ul class="subNav">
      <li><a href="profile.html">プロフィール</a></li>
      <li><a href="keiyaku.html">契約状況</a></li>
    </ul>
  </li>
</ul>
</div>

Comments

[m.ts10806]

うまくいかない、とは？

[azuapricot]

付与ができたならチェックボックスに .prop("checked", true) を設定することもできるのでは？と思うのですが違うのでしょうか

[azuapricot]

あと　.parent().parent().parent()　この書き方自分でもどこに設定したのかわからなくなっちゃうので
.parents("クラス名") とかにした方がいいきがします

[azuapricot]

.parent().parent().parent() → <li class="item current">
このli要素を基準にして→ find(".acc-subOpen").prop("checked", true) とか？（動作確認はしてませんが）

[yambejp]

トリガーはなにを想定しているのですか？
・htmlがロードされたときだけでよい？
・なにかによってclassが動的に変わる可能性がある？

[crigw]

>m.ts10806さん
言葉足らずで申し訳ございません。自分の記述ではcheckedが付与されないということです。

[crigw]

>azuapricotさん
.parents("クラス名")にした時、うまくいかなかったのでよくわからず暫定的に繰り返し記述にしてました。
find(".acc-subOpen").prop("checked", true) についてはどこに記述すればいいのでしょうか。

[crigw]

>yambejpさん
現時点では、HTMLがロードされた時だけでいいです。今後、動的に変わる可能性はあります…。

[yambejp]

ul.contentsとul.subNavの二重にcurrentを付加する意味はあるのでしょうか？

[azuapricot]

「ロードされた時」に、current属性がついている li要素を取得
→ 子要素のチェックボックスにチェックを入れる

[crigw]

>yambejpさん
適応CSS（デザイン）が違うため二重付与してましたが、CSS側で調整できますね…！

[yambejp]

回答の方をみてください

Answer 1

$(function(){
  var href = location.href.match(".+/(.+?)([?#;].*)?$")[1];
  $('.contents:has(a[href="'+href+'"]),.subNav:has(a[href="'+href+'"])').addClass('current');
  $('.subNav:has(a[href="'+href+'"])').prevAll('.acc-subOpen').prop('checked',true);
});

調整版

content→item

<style>
.item.current{
color:aqua;
}
.subNav.current{
color:lime;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('.current').removeClass('current');
  var href = location.href.match(/.+?(?=[?#]|$)/)[0];
  $('a').filter(function(){
    return $(this).prop('href').match(href);
  }).closest('.subNav').addClass('current').closest('.item').addClass('current');
  $('a').filter(function(){
    return $(this).prop('href').match(href);
  }).closest('.subNav').prevAll('.acc-subOpen').prop('checked',true);
});
</script>


<div id="mainNavBox">
<ul class="contents">
  <li class="item">
    <input id="acc-subOpen-home" class="acc-subOpen" type="checkbox">
    <label class="acc-unshown" for="acc-subOpen-home">Home</label>
    <ul class="subNav">
      <li class="current"><a href="./top.html">トップページ</a></li>
      <li><a href="#">お知らせ一覧</a></li>
      <li><a href="#">リリースノート一覧</a></li>
    </ul>
  </li>
  <li class="item">
    <input id="accSP-subOpen-home" class="acc-subOpen" type="checkbox">
    <label class="acc-unshown" for="accSP-subOpen-home">マイページ</label>
    <ul class="subNav">
      <li><a href="profile.html">プロフィール</a></li>
      <li><a href="keiyaku.html">契約状況</a></li>
    </ul>
  </li>
</ul>
</div>

Comments

[crigw]

こちら記述してみたのですが、.crurrentが付与されず
また、labelクリックできなくなってしまいました。

[yambejp]

location.hrefのファイル名とa hrefが完全一致するものを拾っていますが
マッチングの想定が違うのでしょうか？
（getのパラメータやらハッシュやらまで評価したい？）

[crigw]

現時点[a href="./xxx.html"]で指定していますが、将来的には[a href="{{route('top')}}"]と言った記述になり、指定内容と実際表示されるURLでは違いが生じるようです…。私はこの部分理解できていないのですが、とりあえず現時点では[a href="./xxx.html"]や[a href="./xxxl"],[a href="./"]など想定に入るようにしていただければと…それって可能でしょうか？

[yambejp]

属性（attr）ではなくプロパティーでアクセスすれば調整可能です
あとで調整してみます
ただ「./」と「./index.html」は同じものと評価できませんが大丈夫ですか？

[crigw]

ありがとうございます。
多分大丈夫だと思いますが、同じものと評価できない場合何か不具合はおきますでしょうか？

[yambejp]

とりあえず調整版あげておきました
挙動が違う場合は指示してください

[crigw]

お忙しい中ご調整いただきありがとうございました。
ただ大元の親である<ul class="contents">にcurrentがついてしまうためか、全てのアコーディオンが開いてしまいます…やはり、「li.item」と「ul.subnav li」にcurrentがつくようにしていただくことって可能でしょうか…！

[yambejp]

単純にcontentsをitemに返るだけでよいでしょう。
調整版を修正しておきました

[crigw]

何度も調整いただきありがとうございました！
いまだに全てのアコーディオンが開いていしまいますが、残りは頑張って調整してみたいとおもいます。

Answer 2

current があるとき

$('.acc-subOpen', $('.current').closest('.item')).prop('checked', true).trigger('change');

https://api.jquery.com/trigger/

Comments

[crigw]

気づくのが大変遅れてしまいました、申し訳ございません！
こちらでも動作しました。ありがとうございました！