我正在尝试制作一个待办事项列表，您可以核对已完成的任务，它会计算完成的百分比。因此，我尝试的第一件事是创建几个复选框并为点击添加一个事件监听器，然后我将检查该值，看看它是否为 = true 或类似的内容。
我正在尝试找出一种方法来定义 var i 如果我单击第一个复选框，我希望将其设置为 0，将第二个设置为 1。但我希望它动态设置 var i 因为用户将添加新的复选框，并且在添加新项目后我无法声明 i 等于什么。无论如何，这就是我到目前为止所拥有的。
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<script type="text/javascript">
var list;
var checkboxes;
document.addEventListener("DOMContentLoaded",load);
function load(){
list = get("list");
checkboxes = getTag("input");
checkboxes[i].addEventListener("click",toggle);
}
function toggle(){
alert(this.value);
}
function get(id){
return document.getElementById(id);
}
function getTag(tag){
return document.getElementsByTagName(tag);
}
</script>
</head>
<body>
<h1>Kung Fu To Do List 1.0</h1>
<ul id="list">
<li><input type="checkbox" value="true"></li>
<li><input type="checkbox" value="false"></li>
</ul>
</body>
</html>
最佳答案
老实说，我不确定你定义i是什么意思。但似乎您正在寻找的是计算完成百分比，并在用户添加新项目时保持更新。我不会跟踪复选框，而是在需要计算时循环遍历它们。此外，有一个为您添加新复选框的方法，然后可以 Hook 您想要监视的事件。像这样的东西:(jsfiddle:http://jsfiddle.net/nuuyx/)
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<script>
var list;
document.addEventListener("DOMContentLoaded",load);
function load(){
list = get("list");
checkboxes = getTag("input");
for(var i = 0, l = checkboxes.length; i < l; i++){
checkboxes[i].addEventListener("click", toggle);
}
updatePercentage();
}
function updatePercentage(){
var checkboxes = getTag("input");
var total = checkboxes.length;
var done = 0;
for(var i = 0, l = checkboxes.length; i < l; i++){
if(checkboxes[i].checked){
done++;
}
}
get('percent').innerHTML = 'Done: '+Math.round((done/total)*100)+'%';
}
function newCheckbox(){
var item = document.createElement('li');
var chk = document.createElement('input');
chk.type = 'checkbox';
chk.addEventListener("click", toggle);
item.appendChild(chk);
list.appendChild(item);
updatePercentage();
}
function toggle(){
//alert(this.value);
updatePercentage();
}
function get(id){
return document.getElementById(id);
}
function getTag(tag){
return document.getElementsByTagName(tag);
}
</script>
</head>
<body>
<h1>Kung Fu To Do List 1.0</h1>
<ul id="list">
<li><input type="checkbox" value="true"></li>
<li><input type="checkbox" value="false"></li>
</ul>
<div id="percent"></div>
<button onclick="newCheckbox()">new item</button>
</body>
</html>
关于javascript - 如何根据选中的复选框定义 var i？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9196635/