質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.79%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 413

score 33

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

<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の付け方を変えれば良いという意見もあるかと思いますが、今回はそれはなしでお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/10/25 16:26

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

    キャンセル

  • Discord

    2019/10/25 16:27

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

    キャンセル

  • m.ts10806

    2019/10/25 16:29

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

    キャンセル

回答 2

+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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/25 16:25

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

    キャンセル

  • 2019/10/25 16:30

    そうですね。
    <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">
    が外れるのが求めている挙動です。

    キャンセル

  • 2019/10/25 17:40

    ありがとうございます!

    キャンセル

checkベストアンサー

0

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

<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">

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/25 16:02 編集

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

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

    キャンセル

  • 2019/10/25 16:25

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

    キャンセル

  • 2019/10/25 16:32

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

    キャンセル

  • 2019/10/25 16:34

    ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る