时间戳

首页 > 解决方案 > 每次单击复选框时检测一次单击

javascript - 每次单击复选框时检测一次单击

问题描述

我已经弄清楚如何检测点击，但不知道如何通过创建每个新复选框来检测它。我认为我需要告诉机器每个复选框都有一个索引，以便它遍历每个新复选框并显示我的警报消息，但我无法弄清楚。我只是在学习香草 JS，所以请不要使用 JQuery。谢谢！

var inpt = document.getElementById('inpt');

inpt.addEventListener('keydown', function(event){
  var list = document.getElementById('list');
  var inptVal = document.getElementById('inpt').value;
  var newItem = document.createElement('li');
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.setAttribute('id', 'check');
  
  /*when the enter button is pushed, add item.*/
  if (event.keyCode == 13) {
    /*append a new li to the ul with the text from the box*/
    list.appendChild(checkbox);
    list.appendChild(newItem).innerHTML = inptVal;
    inpt.value = ' ';
  }
  
  if(document.getElementById('check').onclick = function(){
    newItem.innerHTML = ' ';
    alert('You finished this task!');
  });
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type=input id='inpt'></input>
  <ul id='list'></ul>
</body>
</html>

标签： javascriptarrays

解决方案

对于纯 javascript，动态检查所有输入类型复选框

var x = document.getElementsByTagName("input");
var i;
for (i = 0; i < x.length; i++) {
  if (x[i].type == "checkbox") {
      x[i].addEventListener("click", function() {
        console.log('Click on every checkbox')
});
  }
}

推荐阅读