[JS30] Day10: Hold Shift to Check Multiple Checkbox
keywords: checkbox
, shift
, select
使用 label
在原本的程式碼中,作者並沒有使用 label ,這樣在操作上會比較不方便,因為一定要點選到該 checkbox 才能勾選,因此先在 HTML 中加上 <label>
<label class="item">
<input type="checkbox" />
<p>This is an inbox layout.</p>
</label>
監聽所有的 checkbox
// STEP1: 選擇並監聽所有的 checkbox
const checkboxs = document.querySelectorAll('.inbox input[type="checkbox"]');
checkboxs.forEach((checkbox) => checkbox.addEventListener('click', checkHandler));