選中所有復選框並取消選中它們

Question

我使用此代碼選擇所有行或取消選擇表中的行：

const selectAll = event => {
    let x = [];
    const checked = event.target.checked;
    const cbs: NodeListOf<HTMLInputElement> = document.querySelectorAll('.liquidationSpreadCb');
    cbs.forEach((cb: HTMLInputElement, i) => {
      cb.click();
      const itemId = cb.className.replace(/\D/g, '');
      const item: ILiquidationSpread = liquidationSpreadList.filter(val => val.id === Number(itemId))[0];
      x.push(item);
    });
    if (!checked) {
      x = [];
    }
    setSelectedItems(x);
  };

當我使用 main select all checkout 調用此代碼時，它工作正常。 所有表格行都被選中。

但是當我運行代碼並選擇所有行之后，當我再次運行 Java 腳本代碼時，我取消選擇例如 3-4 行，選擇的行被取消選擇。

換句話說，此 JavaScript 代碼將選中更改為取消選中，反之亦然。 它應該選擇或取消選擇所有復選框。

知道如何解決這個問題嗎？

Answer 1

這里的邏輯可用於選擇和取消選擇表單中的復選框。

 const form_change = e => { let form = e.target.form; // form.item could either be a NodeList or just one Element. A iterable is needed. let items = (form.item.length) ? form.item : [form.item]; // switch on input name switch (e.target.name) { case 'selectall': // select all or none based on "selectall" let checked = e.target.checked; [...items].forEach(item => item.checked = checked); break; case 'item': // figure out if some "item" are checked let allchecked = ([...items].filter(item => !item.checked).length == 0) ?? true; // change "selectall" based on the result form.selectall.checked = allchecked ? true : false; break; } }; document.forms.form01.addEventListener('change', form_change);

 <form name="form01"> <table> <thead> <tr> <th><input type="checkbox" name="selectall" /></th> <th>Items</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="item" value="1" /></td> <td>Item 1</td> </tr> <tr> <td><input type="checkbox" name="item" value="2" /></td> <td>Item 2</td> </tr> <tr> <td><input type="checkbox" name="item" value="3" /></td> <td>Item 3</td> </tr> </tbody> </table> </form>