子要素にチェックが入っている親要素 以外をJQUERYで非表示にしたいです…

Question

前提・実現したいこと

予約システムのサービス選択時に
ウィザードで遷移してきて、選択項目にチェックが自動で入ります。

下の<label>で囲われている要素が選択項目のグループです。

子要素に<input type="checkbox" checked="checked">のchecked
がある時、チェックされてない<label class="service--1">グループを非表示にしたいです

該当のソースコード

<label class="service--1">
<div class="checkbox">
<input type="checkbox" name="one" id="services_1">
<h1>名前１</h1>
<img　src="/1.png">
</div>
</label>

<label class="service--2">
<div class="checkbox">
<input type="checkbox" name="two" id="services_2" checked="checked">
<h1>名前２</h1>
<img　src="/2.png">
</div>
</label>

試したこと

CSSだと子要素しか非表示にできません

input:not([checked="checked"]) {
display:none;
}

$("label:not(:has[attr='checked']))").hide();

よろしくお願いします…

Comments

[yambejp]

もう少し単純化したhtmlで例示されたほうがよいです
○○を含むというCSSはほとんど実装されていないのでjsが必要になりそうですが
タグ付けされているようにjQueryを利用していいのでしょうか？

[Neoko]

ありがとうございます。

[Neoko]

JQUERYでお願いします

[yambejp]

最初に書きましたが構造が煩雑で何をどうしたときにどう表示・非表示させたいのか
伝わってきません。
もっとシンプルな形のHTMLで提示できませんか？

Answer 1

.has()を使ってはどうでしょう？
.has() | jQuery API Documentation

Comments

[Neoko]

ありがとうございました。

Answer 2

ちょっと命題が不明瞭なのでこんな感じで

<script>
$(function(){
  $('.target :checkbox').on('change',function(){
    $('.target').toggle($('.target').has(':checked').length==0).filter(':has(:checked)').show();
  });
});
</script>
<div class="target">
<label><input type="checkbox">1</label>
</div>
<div class="target">
<label><input type="checkbox">2</label>
</div>
<div class="target">
<label><input type="checkbox">3</label>
</div>

Comments

[Neoko]

ありがとうございました。