每次单击复选框时都会检测到单击
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每次单击复选框时都会检测到单击相关的知识，希望对你有一定的参考价值。
我已经弄清楚如何检测点击，但不知道如何通过创建每个新复选框来检测它。我认为我需要告诉机器每个复选框都有一个索引，以便它会遍历每个新的复选框并显示我的警告信息，但我无法弄明白。我只是在学习vanilla 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>答案
if(document.getElementById('check').onclick = function(){
newItem.innerHTML = ' ';
alert('You finished this task!');
});
奇怪的。删除if( )。
无论如何，您正在尝试从DOM中选择它，但根据之前的条件，它可能尚未附加。无论哪种方式，您显然都在创建具有相同ID的多个元素，因此按ID选择将无效。
相反，您已经拥有该元素，因此只需使用该引用添加处理程序即可。
checkbox.onclick = function(){
newItem.innerHTML = ' ';
alert('You finished this task!');
}
另一答案
对于纯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')
});
}
}
以上是关于每次单击复选框时都会检测到单击的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET MVC，每次用户单击链接时都会增加模型数据中的值