WordPressのタクソノミーで親をチェックすれば子すべてを自動的にチェック

Question

質問

標題の通りですが、カテゴリーでもカスタムタクソノミーでも、
投稿画面で親カテゴリをチェックした際に子カテゴリ全てに自動的にチェックが入るようにしたいです。

似たような機能で、子カテゴリにチェックを付けると自動的に親にもチェックが入るというプラグインがあるようですが、今回はそれとは逆になります。

子カテゴリが多く、一気に全てにチェックを付けたい場合に使用したいのですが、このようなことを実現する機能またはプラグインはあるでしょうか。

ちなみにWP6.1.1、ブロックエディタを使用しています。

###ソースコード
WPのブロックエディタのため、実際に出力されたものがそのまま使えるかどうかわかりませんが、該当部分のソースコードを記載します。

<div class="components-panel__body is-opened">
	<h2 class="components-panel__body-title">
		<button type="button" aria-expanded="true" class="components-button components-panel__body-toggle">
			<span aria-hidden="true">
				<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="components-panel__arrow" aria-hidden="true" focusable="false"><path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"></path></svg>
			</span>カテゴリ
		</button>
	</h2>
	<div class="components-base-control editor-post-taxonomies__hierarchical-terms-filter css-qy3gpb ej5x27r4">
		<div class="components-base-control__field css-1t5ousf ej5x27r3">
			<label class="components-base-control__label css-1v57ksj ej5x27r2" for="inspector-text-control-2">カテゴリを検索</label>
			<input class="components-text-control__input" type="text" id="inspector-text-control-2" value="">
		</div>
	</div>
	<div class="editor-post-taxonomies__hierarchical-terms-list" tabindex="0" role="group" aria-label="エリア">
		<div class="editor-post-taxonomies__hierarchical-terms-choice">
			<div class="components-base-control components-checkbox-control css-qy3gpb ej5x27r4">
				<div class="components-base-control__field css-1t5ousf ej5x27r3">
					<span class="components-checkbox-control__input-container">
						<input id="inspector-checkbox-control-36" class="components-checkbox-control__input" type="checkbox" value="1">
					</span>
					<label class="components-checkbox-control__label" for="inspector-checkbox-control-36">親</label>
				</div>
			</div>
			<div class="editor-post-taxonomies__hierarchical-terms-subchoices">
				<div class="editor-post-taxonomies__hierarchical-terms-choice"><div class="components-base-control components-checkbox-control css-qy3gpb ej5x27r4"><div class="components-base-control__field css-1t5ousf ej5x27r3"><span class="components-checkbox-control__input-container"><input id="inspector-checkbox-control-37" class="components-checkbox-control__input" type="checkbox" value="1"></span><label class="components-checkbox-control__label" for="inspector-checkbox-control-37">子1</label></div></div></div>
				<div class="editor-post-taxonomies__hierarchical-terms-choice"><div class="components-base-control components-checkbox-control css-qy3gpb ej5x27r4"><div class="components-base-control__field css-1t5ousf ej5x27r3"><span class="components-checkbox-control__input-container"><input id="inspector-checkbox-control-38" class="components-checkbox-control__input" type="checkbox" value="1"></span><label class="components-checkbox-control__label" for="inspector-checkbox-control-38">子2</label></div></div></div>
				<div class="editor-post-taxonomies__hierarchical-terms-choice"><div class="components-base-control components-checkbox-control css-qy3gpb ej5x27r4"><div class="components-base-control__field css-1t5ousf ej5x27r3"><span class="components-checkbox-control__input-container"><input id="inspector-checkbox-control-39" class="components-checkbox-control__input" type="checkbox" value="1"></span><label class="components-checkbox-control__label" for="inspector-checkbox-control-39">子3</label></div></div></div>
			</div>
		</div>
	</div>
	<button type="button" aria-expanded="false" class="components-button editor-post-taxonomies__hierarchical-terms-add is-link">新規カテゴリを追加</button>
</div>

Comments

[yambejp]

それってサーバーサイドの課題ですか？UIならjsとかでは？

[rjunakc]

ご質問ありがとうございます。
サーバーサイドではないです。WPプラグイン等で解決できる場合はそちらでも構いません。
こちらで調べた際には2年以上前に更新が停止しているプラグインしか見つけることができませんでした。

[yambejp]

普通にjsでやればよいのでは？
親子関係が構造的なのか属性などで紐づいているのかによりますが
HTMLを提示いただければ回答できるかもしれません

[rjunakc]

ソースを追加してみました。

Answer 1

親子関係の紐づけ要素が不明瞭ですが例えばこんな感じ

document.addEventListener('change',e=>{
  const t=e.target;
  if(t.closest('.components-base-control .components-checkbox-control__input')){
    t.closest('.editor-post-taxonomies__hierarchical-terms-choice').querySelectorAll('.editor-post-taxonomies__hierarchical-terms-subchoices .components-checkbox-control__input').forEach(x=>{
      x.checked=t.checked;
    });
  }
});
```{