javascript - 我如何引用刚刚用 Javascript 制作的特定 html 元素并获取其值？

Question

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

相关代码(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

而不是用 id's 来引用复选框你可以使用你给他们的类(class)来引用他们 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
        }
    });
});

希望这对您有所帮助!