复选框侦听器未触发

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() {&nbsp; $('input[type="checkbox"]').on('change', function() {&nbsp; &nbsp; var list_id = $(this).attr('list_id');&nbsp; &nbsp; console.log(list_id);&nbsp; &nbsp; req = $.ajax({&nbsp; &nbsp; &nbsp; url: '/dashboard',&nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; id: list_id,&nbsp; &nbsp; &nbsp; &nbsp; active: this.checked ? 'true' : 'false'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });});