0
116
Viewscómo agregar la atribución marcada en el texto de tipo de entrada con javascript
HTML
<table> <th> <input type="checkbox" class="wish_all" /> </th> <tr> <td> <input type="checkbox" class="wish_sub" /> </td> </tr> <tr> <td> <input type="checkbox" class="wish_sub"/> </td> </tr> </table>quiero hacer que la función de alternar haga clic en '.wish_all', luego se verifica todo 'wish_sub', esto es javascript, lo intenté de dos maneras
var wishAll = document.querySelector('.wish_all'); var wishSub = document.querySelectorAll('.wish_sub'); var wishAllCheck = wishAll.hasAttribute('checked') wishAll.addEventListener('click', function () { if (wishAllCheck === true) { wishAllCheck.removeAttribute('checked') wishSub.removeAttribute('checked') } else { wishAllCheck.setAttribute('checked', true) wishSub.setAttribute('checked', true) } }); wishAll.addEventListener('click', function () { if (wishAllCheck === true) { wishAllCheck.removeAttribute('checked') wishSub.removeAttribute('checked') } else { wishAllCheck.checked = true; wishSub.checked = true; } });pero ambos no funcionan. alguien podria decirme cual es el problema??
3 answers
Answer question0
Use document.querySelector() para un solo elemento o document.querySelectorALl() para múltiples elementos, se requiere iteración para acceder a elementos individuales para elementos múltiples NodeList
document.querySelector('.wish_all').addEventListener('change', function() { const checked = this.checked; document.querySelectorAll('.wish_sub').forEach(el => { el.checked = checked; }); }); <table> <th> <input type="checkbox" class="wish_all" /> </th> <tr> <td> <input type="checkbox" class="wish_sub" /> </td> </tr> <tr> <td> <input type="checkbox" class="wish_sub"/> </td> </tr> </table>0
El problema aquí es que está configurando el atributo "marcado" en una lista de elementos (wishSub) en lugar de las casillas de verificación individuales. Necesita un ciclo for para revisarlos todos y marcar/desmarcar cada uno.
Aquí hay un codepen que hice con un código un poco más simple. https://codepen.io/nph0613/pen/QWMKQXr
var wishAll = document.querySelector('.wish_all'); var wishSub = document.querySelectorAll('.wish_sub'); wishAll.addEventListener('click', function () { for (let i=0; i<wishSub.length; i++) { wishSub[i].checked = wishAll.checked; } });0
Echa un vistazo a esta línea:
var wishSub = document.querySelectorAll('.wish_sub'); Haz un rápido console.log() y esto es lo que ves:
Eso es una lista de NodeList . No puede setAttribute en una lista de NodeList , solo puede hacerlo en elementos individuales.
var wishAll = document.querySelector('.wish_all'); var wishSub = document.querySelectorAll('.wish_sub'); var wishAllCheck = wishAll.hasAttribute('checked'); wishAll.addEventListener('click', function() { var wishAllCheck = wishAll.checked; // <-- you have to access it within the handler if (!wishAllCheck) { //wishAllCheck.removeAttribute('checked'); <-- unnecessary as the check automatically removes for (var i = 0; i < wishSub.length; i++) { wishSub[i].removeAttribute('checked'); } } else { //wishAllCheck.setAttribute('checked', true) for (var i = 0; i < wishSub.length; i++) { wishSub[i].setAttribute('checked', true); } } }); <table> <th> <input type="checkbox" class="wish_all" /> </th> <tr> <td> <input type="checkbox" class="wish_sub" /> </td> </tr> <tr> <td> <input type="checkbox" class="wish_sub" /> </td> </tr> </table>