回答編集履歴

1

参考

2023/01/30 05:26

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -131,3 +131,30 @@
131
131
  </div>
132
132
  </div>
133
133
  ```
134
+
135
+ # 参考
136
+ limitを超えたらalert
137
+ ```javascript
138
+ let jsCheckItemChecked;
139
+ document.addEventListener('click', e=>{
140
+ const t=e.target;
141
+ if(t.matches('.js-check-item')){
142
+ const p=t.closest('[data-limit]');
143
+ const flg=p.querySelectorAll('.js-check-item:checked').length>=p.dataset.limit;
144
+ if(p.dataset.limit<p.querySelectorAll('.js-check-item:checked').length){
145
+ alert(`${p.dataset.limit}個まで`);
146
+ e.preventDefault();
147
+ }else{
148
+ jsCheckItemChecked=[...document.querySelectorAll('.js-check-item')].map(x=>x.checked);
149
+ localStorage.jsCheckItemChecked=JSON.stringify(jsCheckItemChecked);
150
+ }
151
+ }
152
+ });
153
+ const nav=performance.getEntriesByType("navigation")[0].type;
154
+ window.addEventListener('DOMContentLoaded', ()=>{
155
+ if(nav=="reload"){
156
+ jsCheckItemChecked=JSON.parse(localStorage.jsCheckItemChecked??"[]");
157
+ document.querySelectorAll('.js-check-item').forEach((x,y)=>x.checked=jsCheckItemChecked[y]);
158
+ }
159
+ });
160
+ ```