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')

但它可能需要名称为“技能”的方框中的所有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

Answer 2

我认为您的问题是您只需要对逻辑进行一次编码并将其应用于所有复选框等，对吗？

如果是这样，我认为JQuery会帮助你这么做。

我真的不知道你想要实现什么，但我可以给你一个快速的例子，说明如何利用JQuery以及JQuery使用上下文来检索逻辑上属于彼此的元素的能力。

如果您有一个包含大量复选框的标记，并且在每个框旁边都有一个文本框，例如：

<div class="Row">
    test <input name="choice" class="CheckBox" type="checkbox"/> <input type="text" class="TextBox"/>
</div>
<div class="Row">
    test <input name="choice" class="CheckBox" type="checkbox"/> <input type="text" class="TextBox"/>
</div>
<div class="Row">
    test <input name="choice" class="CheckBox" type="checkbox"/> <input type="text" class="TextBox"/>
</div>
<div class="Row">
    test <input name="choice" class="CheckBox" type="checkbox"/> <input type="text" class="TextBox"/>
</div>

您可以使用简单的JQuery技术在复选框更改时编写事件，然后查询相关文本框以对其执行某些操作：

$(".CheckBox").change(function(){
    var ctx = $(this).parent();
    var myTextBox = $(".TextBox", ctx);

    $(myTextBox).val("test");
});

我希望这足以帮助您了解其工作原理。为了解决这个问题，以下是示例：http://jsfiddle.net/Elak/mcEQa/1/

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

2 个答案: