我如何确保在 JavaScript 中单击任何复选框时，输入字段变为 0

Question

我如何确保当我单击任何复选框时，输入字段变为 0。因为现在它适用于第一个，但不适用于其他复选框。

这是我现在的代码：

let checkbox = document.getElementById("abs");
let inp = document.getElementById("cijfer");
checkbox.addEventListener('change', function() {
    if (this.checked) {
        inp.value = 0;
    }
});

第一个输入字段将 go 变为 0，但第二个输入字段没有。

问题图片：

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>

Answer 1

您正在使用id ( getElementById )，它是一个独特的属性！

请改用“abs”class 和“cijfer”class！

然后找到最接近的输入并将值设为零！

<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>

这是纯 js：您可以改用 jquery：

$('.abs').on('change', function(){
    $(this).prev('input').val('0');
});