teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問checkboxのnameが配列の場合、特定のcheckboxのチェックを外したい

編集履歴

回答編集履歴

3

ちょっと

2019/10/25 07:31

投稿

yambejp
yambejp

スコア116661

test CHANGED
@@ -72,9 +72,13 @@
72
72
 
73
73
  [].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(reg)).map(x=>x.id.match(reg)[1]).forEach(id=>{
74
74
 
75
- document.querySelector(`[id="hogehoge[${id}]"]`).addEventListener('change',()=>{
75
+ var parent=document.querySelector(`[id="hogehoge[${id}]"]`);
76
76
 
77
- [].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(new RegExp(`hoge\d\[${id}\]`))).forEach(x=>{
77
+ var children=[].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(new RegExp(`hoge\d\[${id}\]`)));
78
+
79
+ parent.addEventListener('change',()=>{
80
+
81
+ children.forEach(x=>{
78
82
 
79
83
  x.checked=false;
80
84
 
@@ -82,11 +86,11 @@
82
86
 
83
87
  });
84
88
 
85
- [].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(new RegExp(`hoge\d\[${id}\]`))).forEach(x=>{
89
+ children.forEach(x=>{
86
90
 
87
91
  x.addEventListener('change',()=>{
88
92
 
89
- document.querySelector(`[id="hogehoge[${id}]"]`).checked=false;
93
+ parent.checked=false;
90
94
 
91
95
  });
92
96
 

2

chousei

2019/10/25 07:31

投稿

yambejp
yambejp

スコア116661

test CHANGED
@@ -60,13 +60,17 @@
60
60
 
61
61
  # 汎用性
62
62
 
63
+ ※調整しました
64
+
63
65
  ```javascript
64
66
 
65
67
  <script>
66
68
 
67
69
  window.addEventListener('DOMContentLoaded', ()=>{
68
70
 
69
- ["test","sample"].forEach(id=>{
71
+ var reg=new RegExp(`hogehoge\[(.+?)\]`);
72
+
73
+ [].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(reg)).map(x=>x.id.match(reg)[1]).forEach(id=>{
70
74
 
71
75
  document.querySelector(`[id="hogehoge[${id}]"]`).addEventListener('change',()=>{
72
76
 
@@ -116,6 +120,16 @@
116
120
 
117
121
  <input type="checkbox" name="hogehoge[test]" id="hogehoge[test]" value="-1">
118
122
 
123
+ <hr>
119
124
 
125
+ <input type="checkbox" name="hoge1[fuga]" id="hoge1[fuga]" value="1" checked>
126
+
127
+ <input type="checkbox" name="hoge2[fuga]" id="hoge2[fuga]" value="2" checked>
128
+
129
+ <input type="checkbox" name="hoge3[fuga]" id="hoge3[fuga]" value="3" checked>
130
+
131
+ <input type="checkbox" name="hoge4[fuga]" id="hoge4[fuga]" value="4" checked>
132
+
133
+ <input type="checkbox" name="hogehoge[fuga]" id="hogehoge[fuga]" value="-1">
120
134
 
121
135
  ```

1

はんよう

2019/10/25 07:19

投稿

yambejp
yambejp

スコア116661

test CHANGED
@@ -55,3 +55,67 @@
55
55
  ```
56
56
 
57
57
  挙動が違うようなら指摘ください
58
+
59
+
60
+
61
+ # 汎用性
62
+
63
+ ```javascript
64
+
65
+ <script>
66
+
67
+ window.addEventListener('DOMContentLoaded', ()=>{
68
+
69
+ ["test","sample"].forEach(id=>{
70
+
71
+ document.querySelector(`[id="hogehoge[${id}]"]`).addEventListener('change',()=>{
72
+
73
+ [].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(new RegExp(`hoge\d\[${id}\]`))).forEach(x=>{
74
+
75
+ x.checked=false;
76
+
77
+ });
78
+
79
+ });
80
+
81
+ [].filter.call(document.querySelectorAll('[type=checkbox]'),x=>x.id.match(new RegExp(`hoge\d\[${id}\]`))).forEach(x=>{
82
+
83
+ x.addEventListener('change',()=>{
84
+
85
+ document.querySelector(`[id="hogehoge[${id}]"]`).checked=false;
86
+
87
+ });
88
+
89
+ });
90
+
91
+ });
92
+
93
+ });
94
+
95
+ </script>
96
+
97
+ <input type="checkbox" name="hoge1[sample]" id="hoge1[sample]" value="1" checked>
98
+
99
+ <input type="checkbox" name="hoge2[sample]" id="hoge2[sample]" value="2" checked>
100
+
101
+ <input type="checkbox" name="hoge3[sample]" id="hoge3[sample]" value="3" checked>
102
+
103
+ <input type="checkbox" name="hoge4[sample]" id="hoge4[sample]" value="4" checked>
104
+
105
+ <input type="checkbox" name="hogehoge[sample]" id="hogehoge[sample]" value="-1">
106
+
107
+ <hr>
108
+
109
+ <input type="checkbox" name="hoge1[test]" id="hoge1[test]" value="1" checked>
110
+
111
+ <input type="checkbox" name="hoge2[test]" id="hoge2[test]" value="2" checked>
112
+
113
+ <input type="checkbox" name="hoge3[test]" id="hoge3[test]" value="3" checked>
114
+
115
+ <input type="checkbox" name="hoge4[test]" id="hoge4[test]" value="4" checked>
116
+
117
+ <input type="checkbox" name="hogehoge[test]" id="hogehoge[test]" value="-1">
118
+
119
+
120
+
121
+ ```