Question

我正在尝试制作待办事项列表，您可以检查已完成的任务，它会计算完成的百分比。所以我尝试的第一件事是制作几个复选框并为点击添加一个事件监听器，然后我会检查该值，看看它是否为true或类似的东西。

如果我点击第一个复选框我希望它设置为0而第二个设置为1，我试图想出一种定义var i的方法。但是我想让它动态设置{ {1}}因为用户将添加新的复选框，我无法在添加新项目后声明var i等于什么。无论如何这是我到目前为止。

Answer 1

实现您想要的最简单方法（至少我认为是您想要的）是创建<input type="hidden" value="-1" />。它的值将在onClick事件中更改。您可以命名您的复选框（0,1,2，...）并在事件中读取此变量，然后将其保存到隐藏的输入字段。

Answer 2

老实说，通过定义i，我不确定你的意思。但看起来你正在寻找的是计算完成百分比，并在用户添加新项目时保持更新。我不会跟踪checkboxes，而是在需要计算时循环遍历它们。此外，使用为您添加新复选框的方法可以挂钩您要监视的事件。类似的东西：（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>

如何根据选中的复选框定义var i？

2 个答案: