复选框侦听器未触发

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

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'

      }

    });

  });

});