javascript - 获取点击的 id 并在另一个函数中使用它

Question

我有几个包含图像、文本和复选框的框:

<label name="skill" id="testbox" class="box tooltip" onclick="toggleCheckbox('test');"  style="background-image:url('red.png')">
<span><img class="callout" src="callout.png"><script>document.write (test);</script></span>
<div class="margin">
    <img src="">
    test<input name="choice" value="1" id="test" type="checkbox" onchange="onCheckboxChanged(); checkTotal();" disabled>
</div>

当我单击标签中的任意位置时，我尝试获取 id (testbox) 并在此函数中使用它:

var onCheckboxChanged = function(checkbox){
var test = document.getElementById('test');
var testbox = document.getElementById('testbox');
var structure = document.getElementById('structure');
var structurebox = document.getElementById('structurebox');

if(structure.checked){
    test.disabled = false;
    structurebox.style.backgroundImage='url(green.png)';
}
else{
    test.disabled = true;
    structurebox.style.backgroundImage='url(grey.png)';
}

if(test.disabled){
    testbox.style.backgroundImage='url(red.png)';
}
else {
    if(test.checked){
        testbox.style.backgroundImage='url(green.png)';
    }
    else{
        testbox.style.backgroundImage='url(grey.png)';
    }
}
};

我可以复制/粘贴代码并更改 ID，但我已经有 70 多个盒子，而且还会有更多。我尝试过:

document.getElementsByName("skill")[0].getAttribute('id')

但它可能会从名称为“skill”的框中获取所有 id。我想我应该使用类似 this 的东西它可以工作，但我不知道如何将它连接到我的代码，因此我可以在我的函数中使用此函数中的 clicked id (因为 var 是最好的)。

Answer 1

尽可能避免内联 javascript，也可以使用 .innerHTML 代替 document.write。
尝试将 onclick 事件监听器附加到每个标签并获取单击的标签 ID:

var all_labels = document.getElementsByName("skill");
for (var i = 0; i < all_labels.length; i++) {
    all_labels[i].onclick = function () {
        alert(this.getAttribute('id'));
    };
}; 

演示 here