Question

我想将事件侦听器添加到页面上的所有复选框。

<input type="checkbox" name="sel[]" id="1" value="1">
<input type="checkbox" name="sel[]" id="2" value="2">
<input type="checkbox" name="sel[]" id="3" value="3">
<input type="checkbox" name="sel[]" id="4" value="4">
<input type="checkbox" name="sel[]" id="5" value="5">
<input type="checkbox" name="sel[]" id="6" value="6">
<!--  .....  -->

<script>
var arr =  document.getElementsByName("sel[]");

var copy = [];

for (i = 0; i < arr.length; i++)
    copy[i] = arr[i].id;


var checkboxes = [];
var data;


for (j = 0; j < arr.length; j++)
{
    checkboxes[j] = document.getElementById(copy[j]);
    checkboxes[j].addEventListener('change', (event) => {
    if (event.target.checked) 
    {
        data = j;
        $.post("/php/ses.php", {data:data});
    }
    else 
    {
        data = (-1)*j;
        $.post("/php/ses.php", {data:data});
    }
 });
</script>

它适用于每个复选框，但如果选中任何复选框，则始终发送6（如果未选中，则始终发送-6）。我想：第一个chceckbox分别为1和-1，第二个为2和-2等，而不是每个6 / -6。

Answer 1

就您使用JQuery而言，此代码可能更可取

var checkboxes =  $('[name="sel[]"]');

//listen all checkboxes change event
checkboxes.on('change', function(){
    var id = this.value; // id equals j in your code
    $.post("/php/ses.php", { data: this.checked ? id: -id }); // send data id if checked and -id if not checked
});

Answer 2

您可以为数据使用复选框数据值，而不用保留单独的实例。

var arr =  document.getElementsByName("sel[]");
for (j = 0; j < arr.length; j++){
    arr[j].addEventListener('change', (event) => {		
    if (event.target.checked) {
        //$.post("/php/ses.php", {data:data});
        console.log({data: parseInt(event.target.value)});
    }else {
        //$.post("/php/ses.php", {data:data});
        console.log({data: -parseInt(event.target.value)});
    }
 });
 }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<input type="checkbox" name="sel[]" id="1" value="1">
<input type="checkbox" name="sel[]" id="2" value="2">
<input type="checkbox" name="sel[]" id="3" value="3">
<input type="checkbox" name="sel[]" id="4" value="4">
<input type="checkbox" name="sel[]" id="5" value="5">
<input type="checkbox" name="sel[]" id="6" value="6">
</body>
</html>

您的代码以6结尾的原因是，您的data是全局变量，并且在每次循环后都会更新，最后以6结尾， data上每个项目的事件监听器都没有本地arr。请选中此项以详细了解JavaScript closure inside loops – simple practical example

Answer 3

虽然Prokhor Orlov的答案是正确的，但我想解释一下OP中的错误。当事件处理程序触发for循环时，迭代器已经退出循环并具有最大值。此错误在初学者中非常常见，并且问题被问了100多次。解决方案也是众所周知的，请在循环中使用闭包。像这样的东西。

for (i = 0; i < arr.length; i++) {
(function(j){
  checkboxes[j] = document.getElementById(copy[j]);
  checkboxes[j].addEventListener('change', (event) => {
    if (event.target.checked) {
      data = j;
      $.post("/php/ses.php", {
        data: data
      });
    } else {
      data = (-1) * j;
      $.post("/php/ses.php", {
        data: data
      });
    }
  });
})(i);
}

免责声明：在这种情况下，不建议使用此代码

循环中的JS AddEventListener（针对所有复选框）

3 个答案: