¿Cómo me aseguro de que cuando hago clic en cualquier casilla de verificación, el campo de entrada va a 0. Porque ahora funciona con el primero, pero no con los demás?
Este es el código que tengo ahora:
let checkbox = document.getElementById("abs"); let inp = document.getElementById("cijfer"); checkbox.addEventListener('change', function() { if (this.checked) { inp.value = 0; } });El primer campo de entrada va a 0, pero el segundo no.
Imagen del problema:
Casilla de verificación y código de entrada en 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>está utilizando id ( getElementById ) y es un atributo único.
¡use la clase "abs" y la clase "cijfer" en su lugar!
¡luego encuentre la entrada más cercana y haga que el valor sea cero!
<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>esto fue js puro! puede usar jquery en su lugar:
$('.abs').on('change', function(){ $(this).prev('input').val('0'); });