0
223
ViewsHow do I make sure in JavaScript that when I click on any checkbox, the input field goes to 0
How do I make sure that when I click on any checkbox, the input field goes to 0. Because now it works with the first, but not with the others.
This is the code I have now:
let checkbox = document.getElementById("abs");
let inp = document.getElementById("cijfer");
checkbox.addEventListener('change', function() {
if (this.checked) {
inp.value = 0;
}
});
The first input field does go to 0, but the second one does not.
Picture of the problem:
Checkbox and input code in gohtml:
<td><input id="cijfer" type="number" name="grade-{{$s.ID}}" step="0.1" min = "0" max = "10" value="{{(index $.Grades $s.ID).Value}}"></td>
<td>
<input id="abs" type="checkbox" name="abs-{{$s.ID}}">
<label for="abs">ABS</label>
</td>
·
Juan Pablo Isaza
1 answers
Answer question0
you are using id (getElementById) and it's an unique attribute!
use "abs" class and "cijfer" class instead!
then find the closest input and make the value zero!
<script>
function closest(el, classname) {
if(el.parentNode){
if(el.parentNode.className.includes(classname)){
return el.parentNode;
}
else{
return closest(el.parentNode, classname);
}
}
else{
return false;
}
}
document.querySelectorAll('.abs').forEach(function(item) {
item.addEventListener('change', function() {
if (this.checked) {
let closest = closest(this, 'cijfer');
closest.value = "0";
}
}
});
</script>
this was pure js! you may use jquery instead:
$('.abs').on('change', function(){
$(this).prev('input').val('0');
});
·
Juan Pablo Isaza
Report
Answer question