回答編集履歴

1

js

2019/10/02 08:57

投稿

yambejp
yambejp

スコア116694

test CHANGED
@@ -49,3 +49,69 @@
49
49
 
50
50
 
51
51
  ```
52
+
53
+
54
+
55
+ # js sample
56
+
57
+ どうしてもjsでやりたい場合はこう
58
+
59
+ ```javascript
60
+
61
+ <style>
62
+
63
+ .checked{
64
+
65
+ text-decoration: line-through;
66
+
67
+ }
68
+
69
+ </style>
70
+
71
+ <script>
72
+
73
+ window.addEventListener('DOMContentLoaded', ()=>{
74
+
75
+ [].forEach.call(document.querySelectorAll('#foo [type=checkbox]'),x=>{
76
+
77
+ x.addEventListener('change',e=>{
78
+
79
+ e.target.closest('label').classList.toggle('checked',e.target.checked);
80
+
81
+ });
82
+
83
+ });
84
+
85
+ });
86
+
87
+ </script>
88
+
89
+ <ul id="foo" class="js-todoList">
90
+
91
+ <li><label><input type="checkbox">OA機器会社</label></li>
92
+
93
+ <li><label><input type="checkbox">コンピュータ会社</label></li>
94
+
95
+ <li><label><input type="checkbox">保険会社</label></li>
96
+
97
+ <li><label><input type="checkbox">取引銀行</label></li>
98
+
99
+ <li><label><input type="checkbox">定期購読新聞・雑誌</label></li>
100
+
101
+ <li><label><input type="checkbox">加入団体</label></li>
102
+
103
+ <li><label><input type="checkbox">法務局</label></li>
104
+
105
+ <li><label><input type="checkbox">税務局</label></li>
106
+
107
+ <li><label><input type="checkbox">社会保険事務所</label></li>
108
+
109
+ <li><label><input type="checkbox">労働基準監督署</label></li>
110
+
111
+ <li><label><input type="checkbox">郵便局</label></li>
112
+
113
+ <li><label><input type="checkbox">公共職業安定所</label></li>
114
+
115
+ </ul>
116
+
117
+ ```