checkboxのnameが配列の場合、特定のcheckboxのチェックを外したい

Question

下記のようなチェックボックスが並んでいます。

<input type="checkbox" name="hoge1[sample]" id="hoge1[sample]" value="1">
<input type="checkbox" name="hoge2[sample]" id="hoge2[sample]" value="2">
<input type="checkbox" name="hoge3[sample]" id="hoge3[sample]" value="3">
<input type="checkbox" name="hoge4[sample]" id="hoge4[sample]" value="4">

<input type="checkbox" name="hoge1[test]" id="hoge1[test]" value="1">
<input type="checkbox" name="hoge2[test]" id="hoge2[test]" value="2">
<input type="checkbox" name="hoge3[test]" id="hoge3[test]" value="3">
<input type="checkbox" name="hoge4[test]" id="hoge4[test]" value="4">

<input type="checkbox" name="hogehoge[test]" id="hogehoge[test]" value="-1">

このとき、「hogehoge[test]」にチェックをつけたら、[test]のチェックボックスのチェックだけ外れるようにしたいのですが、どのようにすれば良いでしょうか。
[sample]のチェックボックスはそのままです。

また「hoge4[test]」などにチェックを入れたら、「hogehoge[test]」のチェックは外したいです。

nameの付け方を変えれば良いという意見もあるかと思いますが、今回はそれはなしでお願いします。

Comments

[yambejp]

チェックは外すだけでつけなくてよいのでしょうか？

[Discord]

すみません、説明文に補足があります。
とりあえず「hogehoge[test5]」にチェックをつけたら、外すでOKです。
また、他のにチェックをつけたら「hogehoge[test5]」は外したいです。

[yambejp]

hogehoge[test5]が存在しないですね

[Discord]

すみません、修正しました！

[yambejp]

hogehoge[test]の処理で[test]を調整すると自分自身も[test]なので
影響しますが大丈夫ですか？
それとともhoge1～5+[test]限定などの条件が必要ですか？

[Discord]

自分自身には影響しない形でお願いします。

[m.ts10806]

これは質問ではなくコード作成依頼です。

[Discord]

すみません。。

[m.ts10806]

謝るのではなくきちんと自身の試したこと調べたことを記載してそのコードの何が問題なのか、teratailとしての質問の形にしてください。
できれば質問テンプレートを利用してくださいね

[Discord]

ありがとうございます。次回から改善いたします。
ご指摘ありがとうございます。

[m.ts10806]

んー。「回答がついたからそれでいいじゃん」と言うことですね。これで次回からと後回しにする人で改善された人を見たことがありませんけど。
わかりました。では。

Answer 1

$('[name="hogehoge\[test5\]"]').on('change', function(event) {
  if (event.target.checked) {
    $('[name$="\[test\]"]').prop('checked', false);
  }
});

https://api.jquery.com/attribute-ends-with-selector/
https://api.jquery.com/prop/

-- 仕様変更対応分追記

$(document).on('change', '[type="checkbox"][name$="\]"]', function(event) {
  var target = event.target;
  if (!target.checked) {
    return true;
  }

  var escapedName = CSS.escape(target.name.replace(/.+[/, '['));
  if (target.name.startsWith('hogehoge')) {
    $('[name$="' + escapedName + '"]').not(target).prop('checked', false);
  } else {
    $('[name="hogehoge' + escapedName + '"]').prop('checked', false);
  }
});

https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

Comments

[Discord]

ありがとうございます。
ちなみになのですが、[test]の部分が変数で動的な場合も同様な形でできますでしょうか。

例えばhogehoge[test]にチェックをつけたら、[test]だけチェックが外れて、hogehoge[sample]なら[sample]だけチェックが外れるというように、少し汎用的に作りたいです。

[x_x]

自身のチェックも外れるのでしょうか？
もう少し仕様を煮詰めてくれるようお願いします。

[Discord]

①<input type="checkbox" name="hogehoge[test]" id="hogehoge[test]" value="-1">
にチェックをつける

②下記のチェックが外れる
<input type="checkbox" name="hoge1[test]" id="hoge1[test]" value="1">
<input type="checkbox" name="hoge2[test]" id="hoge2[test]" value="2">
<input type="checkbox" name="hoge3[test]" id="hoge3[test]" value="3">
<input type="checkbox" name="hoge4[test]" id="hoge4[test]" value="4">

③
<input type="checkbox" name="hoge1[test]" id="hoge1[test]" value="1">
<input type="checkbox" name="hoge2[test]" id="hoge2[test]" value="2">
<input type="checkbox" name="hoge3[test]" id="hoge3[test]" value="3">
<input type="checkbox" name="hoge4[test]" id="hoge4[test]" value="4">

いずれかにチェックが入ったら、
<input type="checkbox" name="hogehoge[test]" id="hogehoge[test]" value="-1">
のチェックが外れる。

基本仕様は以上です。
ただし、hogehoge[test]の[test]が他の名前の場合もあるので、できれば[]の中身が同一の、他のチェックボックスのチェックを外す、みたいなことがしたいです。

わかりにくくてすみません。

[x_x]

いままで触れていませんが、value 値が関係あるのですか？

[Discord]

value値は特に気にしなくて大丈夫です。

[x_x]

2種類のチェックボックスの違いは何でしょうか？
name 属性値の最初が hogehoge ということですか？

[Discord]

そうですね。
<input type="checkbox" name="hogehoge[test]" id="hogehoge[test]" value="-1">
<input type="checkbox" name="hoge4[test]" id="hoge4[test]" value="4">
この違いはnameだけです。

<input type="checkbox" name="hogehoge[test]" id="hogehoge[test]" value="-1">
にチェックをいれたら、
<input type="checkbox" name="hoge4[test]" id="hoge4[test]" value="4">
が外れ、
<input type="checkbox" name="hogehoge[sample]" id="hogehoge[sample]" value="-1">
にチェックをいれたら、
<input type="checkbox" name="hoge4[sample]" id="hoge4[sample]" value="4">
が外れるのが求めている挙動です。

[Discord]

ありがとうございます！

Answer 2

ちょっと命名方法がグダグダすぎるような気がしますがこんな感じで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('[id="hogehoge[test]"]').addEventListener('change',()=>{
    [].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(/hoge\d[test]/)).forEach(x=>{
      x.checked=false;
    });
  });
  [].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(/hoge\d[test]/)).forEach(x=>{
    x.addEventListener('change',()=>{
      document.querySelector('[id="hogehoge[test]"]').checked=false;
    });
  });
});
</script>
<input type="checkbox" name="hoge1[sample]" id="hoge1[sample]" value="1" checked>
<input type="checkbox" name="hoge2[sample]" id="hoge2[sample]" value="2" checked>
<input type="checkbox" name="hoge3[sample]" id="hoge3[sample]" value="3" checked>
<input type="checkbox" name="hoge4[sample]" id="hoge4[sample]" value="4" checked>

<input type="checkbox" name="hoge1[test]" id="hoge1[test]" value="1" checked>
<input type="checkbox" name="hoge2[test]" id="hoge2[test]" value="2" checked>
<input type="checkbox" name="hoge3[test]" id="hoge3[test]" value="3" checked>
<input type="checkbox" name="hoge4[test]" id="hoge4[test]" value="4" checked>

<input type="checkbox" name="hogehoge[test]" id="hogehoge[test]" value="-1">

挙動が違うようなら指摘ください

汎用性

※調整しました

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var reg=new RegExp(`hogehoge\[(.+?)\]`);
  [].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(reg)).map(x=>x.id.match(reg)[1]).forEach(id=>{
    var parent=document.querySelector(`[id="hogehoge[${id}]"]`);
    var children=[].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(new RegExp(`hoge\d\[${id}\]`)));
    parent.addEventListener('change',()=>{
      children.forEach(x=>{
        x.checked=false;
      });
    });
    children.forEach(x=>{
      x.addEventListener('change',()=>{
        parent.checked=false;
      });
    });
  });
});
</script>
<input type="checkbox" name="hoge1[sample]" id="hoge1[sample]" value="1" checked>
<input type="checkbox" name="hoge2[sample]" id="hoge2[sample]" value="2" checked>
<input type="checkbox" name="hoge3[sample]" id="hoge3[sample]" value="3" checked>
<input type="checkbox" name="hoge4[sample]" id="hoge4[sample]" value="4" checked>
<input type="checkbox" name="hogehoge[sample]" id="hogehoge[sample]" value="-1">
<hr>
<input type="checkbox" name="hoge1[test]" id="hoge1[test]" value="1" checked>
<input type="checkbox" name="hoge2[test]" id="hoge2[test]" value="2" checked>
<input type="checkbox" name="hoge3[test]" id="hoge3[test]" value="3" checked>
<input type="checkbox" name="hoge4[test]" id="hoge4[test]" value="4" checked>
<input type="checkbox" name="hogehoge[test]" id="hogehoge[test]" value="-1">
<hr>
<input type="checkbox" name="hoge1[fuga]" id="hoge1[fuga]" value="1" checked>
<input type="checkbox" name="hoge2[fuga]" id="hoge2[fuga]" value="2" checked>
<input type="checkbox" name="hoge3[fuga]" id="hoge3[fuga]" value="3" checked>
<input type="checkbox" name="hoge4[fuga]" id="hoge4[fuga]" value="4" checked>
<input type="checkbox" name="hogehoge[fuga]" id="hogehoge[fuga]" value="-1">

Comments

[Discord]

ありがとうございます。
ちなみになのですが、[test]の部分が変数で動的な場合も同様な形でできますでしょうか。

例えばhogehoge[test]にチェックをつけたら、[test]だけチェックが外れて、hogehoge[sample]なら[sample]だけチェックが外れるというように、少し汎用的に作りたいです。

[Discord]

ありがとうございます！思っていたような動きができました。
ありがとうございます！

[yambejp]

挙動は問題ないようなので見やすくしときました

[Discord]

ありがとうございます。