0
128
Visualizaçõeshow to add checked attribution into input type text with 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>
i want to make toggle function as i click '.wish_all', then all 'wish_sub' is checked this is javascript i tried two ways
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;
}
});
but both are not working. could anyone please let me know what is the problem??
3 Respostas
Responde à pergunta0
Use document.querySelector() for single element or document.querySelectorALl() for multiple elements, iteration is required to access individual elements for multi-elements 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
The problem here is you're setting the attribute "checked" on a list of elements (wishSub) instead of the individual checkboxes. You need a for loop to go through them all and check/uncheck each one.
Here's a codepen I made with a little bit simpler code. 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
Take a look at this line:
var wishSub = document.querySelectorAll('.wish_sub');
Do a quick console.log() and this is what you see:
That's a NodeList. You can't setAttribute on a NodeList, you can only do that on individual elements.
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>