复选框侦听器未触发

Question

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

当你使用querySelector时你只会得到第一个
输入前面有一个不应该出现的点
您有 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'
      }
    });
  });
});

复选框侦听器未触发

Checkbox listener not firing

html

javascript

checkbox