复选框侦听器未触发

Question

我已经设置了一个复选框，它应该与列表中的每一行一起出现。 我想根据复选框状态传递 row.id 和 boolean 。 但问题是它只适用于第一个复选框：传递了 id 和布尔状态。

{% for row in list %}
   ....
    <label>
      Off
      <input name="active{{ row.id }}" id="active{{ row.id }}" type="checkbox" list_id="{{ row.id }}">
      <span class="lever"></span>
      On
    </label>
   ....
{% endfor %}

我添加了 javascript 来监听复选框状态，并在检查后向 Flask 应用程序发送 POST 请求。 它有效，但仅在选中第一个复选框时触发，忽略 Jinja2 生成的所有其他复选框。

document.addEventListener('DOMContentLoaded', function () {
  var checkbox = document.querySelector('.input[type="checkbox"]');
  checkbox.addEventListener('change', function () {
  var list_id = $(this).attr('list_id');
  
    if (checkbox.checked) {
        req = $.ajax({
          url : '/dashboard',
          type : 'POST',
          data : { id: list_id, active : 'true' }
        });

      console.log(list_id);
    } else {
          req = $.ajax({
          url : '/dashboard',
          type : 'POST',
          data : { id : list_id, active: 'false' }
        });
      console.log(list_id);
    }
  });
});

Answer 1

1. 当您使用 querySelector 时，您只会获得第一个
2. 你在输入前面有一个不应该在那里的点
3. 你有 jQuery，所以使用它 - 它将一次性获取所有复选框，而无需querySelectorAll

 $(function() { $('input[type="checkbox"]').on('change', function() { var list_id = $(this).attr('list_id'); console.log(list_id); req = $.ajax({ url: '/dashboard', type: 'POST', data: { id: list_id, active: this.checked ? 'true' : 'false' } }); }); });