[javascript,typescript]特定チェックボックスにチェックをつけたら他のチェックボックスにもチェックをつけたい

Question

下記のようなチェックボックスがあります。

<input type="checkbox" name="hoge[]" value="10" checked="">
<input type="checkbox" name="hoge[]" value="20" checked="">
<input type="checkbox" name="hoge[]" value="30" checked="">
<input type="checkbox" name="hoge[]" value="40" checked="">

valueが「10」のチェックボックスにチェックが入ったら、valueが「20」のチェックボックスにもチェックをつけたいです。
チェックが外れたら逆にチェックを外したいです。

...
...
      document.querySelectorAll(
        "input[type='checkbox'][name='hoge[]']",
      ),
      element => {
        element.addEventListener('change', event => {
          const input_check = event.target as HTMLInputElement;
          if (input_check.checked) {
            // チェックされたらここにくる
          }
        });
      },
...
...

こんな感じでチェックがされたときのイベントは拾えるようになったのですが、valueが「10」のときvalueが「20」のチェックボックスにもチェックつけるということができず悩んでいます。

ご教示お願いいたします。

追記：やはりinputにidがないと難しいのでしょうか。。

Comments

[yambejp]

チェック10,20がチェックサれている状態で20を外したらどうするのでしょうか？
・10もはずれる
・20は10がチェックされている状態だとはずせない
・20の挙動は10に影響しない

[Discord]

・20の挙動は10に影響しない
です！
ただ、いただいた回答の内容を参考にできそうです！
ありがとうございます！

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('[name="hoge[]"][value="10"]').addEventListener('change',e=>{
    document.querySelector('[name="hoge[]"][value="20"]').checked=e.target.checked;
  });
});
</script>

<label><input type="checkbox" name="hoge[]" value="10">10</label>
<label><input type="checkbox" name="hoge[]" value="20">20</label>
<label><input type="checkbox" name="hoge[]" value="30">30</label>
<label><input type="checkbox" name="hoge[]" value="40">40</label>