回答編集履歴
1
参考
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
|
+
```
|