我如何引用刚刚在 Javascript 中创建的特定 html 元素并获取其值？

Question

我的程序接收用户输入的字符串和复选框，并构建要显示的列表。（基本上是检查列表）每个列表元素都由一个字符串变量和一个复选框输入组成，但如果说第三个复选框会被勾选，我不能引用特定的复选框，因为 ID 在此方法中不是唯一的。我觉得好像有更好的方法。我是 Whosebug 的新手，所以如果代码太多、太少、令人困惑等，我深表歉意。

相关代码 (imo):

var taskArr= []; //String of tasks array
var compArr=[]; //comp = completed? task completion array, has bool
var isCompleted = 0;

document.getElementById('list').addEventListener('click',alternateValue);

function alternateValue(){
    //Recheck all the actual clicked boxes and updates the array since the list members do not have a unique id. Another way?

    alert("click works!");
    var newChecks = document.getElementsByClass('');
    //2nd alert, no alert.
alert(newChecks[0].checked);
    compArr = [];
    for(i = 0; i<newChecks.length;i++){
        compArr.push(newChecks[i].checked);
    }
}

function addTask(){
    var check = document.getElementById('compInput').checked;
    var task = document.getElementById('taskInput').value;
    taskArr.push(task);
    compArr.push(check);
    alert(check);
    //Check for correct value of.. the check
    update();
}   

function update(){
    var tasks = '<ul>';
    for(i =0; i< taskArr.length;i++){
        if(compArr[i] == 0){
            tasks = tasks.concat('<li>'+taskArr[i]+'<input type="checkbox" class="texts" placeholder="Done?"/></li>');

        }
        else{
            tasks = tasks.concat('<li>'+taskArr[i]+'<input type="checkbox" class="texts" checked placeholder="Done?"/></li>');
        }
    }
    tasks = tasks.concat('</ul>');      
    document.getElementById('list').innerHTML = tasks;  
    document.getElementById('comps').addEventListener('click',alternateValue);
}

Answer 1

您可以使用 class 来引用复选框，而不是使用 id's 来引用它们 class="texts"

HTML:

<input class="texts" type="checkbox" value="a"/>A
<input class="texts" type="checkbox" value="b"/>B
<input class="texts" type="checkbox" value="c"/>C

仅使用 JavaScript：JavaScript demo

如果您想要一个纯粹的 JavaScript 解决方案，那么您需要创建一个事件处理程序来处理 class="texts" 复选框上的事件。创建事件后，您可以通过附加一个函数来使用它，并在该函数内执行所需的操作。

<script>
    var classname = document.getElementsByClassName("texts");
    for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('click', myFunction);
    }

    function myFunction(e) {

        //accessing checked value of the textbox
        var val = e.target.value;
        alert(val);

        //do whatever you want with "val"

    }
</script>

使用jQuery：jQuery demo

如果你想使用jQuery你可以写下面的脚本而不是上面的JavaScript。

$(document).ready(function(){
    $(".texts").change(function(){
        if(this.checked){
            alert($(this).val());
            //perform whatever you want to do on clicked checkbox
        }
    });
});

希望对您有所帮助！

Answer 2

我更喜欢 .on 而不是 .change，因为前者可以使用更少的内存并且适用于动态添加的元素。

$(document).ready(function(){
    $(".texts").on('change',function(){
        if(this.checked){
             alert($(this).val());
            //perform whatever you want to do on clicked checkbox
        }
    });
});

Reference

我如何引用刚刚在 Javascript 中创建的特定 html 元素并获取其值？

How would I refer to a specific html element that was just made in Javascript and get its value?

html

javascript

class

event-listener