teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

コードを追記

2021/07/10 07:11

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37488

answer CHANGED
@@ -18,4 +18,17 @@
18
18
 
19
19
  [EventTarget.addEventListener() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
20
20
  [Document.querySelectorAll() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll)
21
- [NodeList.prototype.forEach() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach)
21
+ [NodeList.prototype.forEach() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach)
22
+
23
+ # コードを追記
24
+
25
+ 一応、コードを書いておきます。
26
+
27
+ ```js
28
+ const target = document; // ここで範囲を決める
29
+ const labelElements = target.querySelectorAll('label');
30
+
31
+ labelElements.forEach(el => el.addEventListener('click', e =>
32
+ labelElements.forEach(el => target.getElementById(el.htmlFor).checked = false)
33
+ ));
34
+ ```

1

コメントを受けて追記

2021/07/10 07:10

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37488

answer CHANGED
@@ -6,4 +6,16 @@
6
6
  ...
7
7
 
8
8
  <input type="radio" name="toggle" id="search-toggle" class="c-search-toggle">
9
- ```
9
+ ```
10
+
11
+ ---
12
+
13
+ # コメントを受けて追記
14
+
15
+ >__ラジオボタンだと一回チェックするとチェックを外せない__
16
+
17
+ それであれば、JavaScript を使うしかないと思うので、普通にラベルのクリックイベントを拾って、全部のチェックボックスを外すのがいいでしょう。
18
+
19
+ [EventTarget.addEventListener() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
20
+ [Document.querySelectorAll() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll)
21
+ [NodeList.prototype.forEach() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach)