Utilizo este código para seleccionar todo o anular la selección de filas en la tabla:
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); };Cuando llamo a este código usando main select all checkout, funciona bien. Se seleccionan todas las filas de la tabla.
Pero cuando ejecuto el código y se seleccionan todas las filas y luego deselecciono, por ejemplo, 3-4 filas cuando ejecuto el código de script Java nuevamente, el seleccionado se deselecciona.
En otras palabras, este código JavaScript cambia de seleccionado a deseleccionado y viceversa. Debe seleccionar o anular la selección de todas las casillas de verificación.
¿Alguna idea de cómo puedo arreglar esto?
Esta lógica aquí se puede utilizar para seleccionar y anular la selección de casillas de verificación en un formulario.
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>