1

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

<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（测试框）：

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。我想我应该使用类似的东西，它可以工作，但我不知道如何将它连接到我的代码，所以我可以在我的函数中使用这个函数的点击 id（因为 var 是最好的）。

4

2 回答 2

1

尽可能避免使用内联 javascript，也可以使用 .write 代替 document.write .innerHTML。
试试这个为每个标签附加一个 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'));
    };
};

演示在这里

于 2013-09-22T10:27:40.740 回答
0

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

如果是这样，我认为 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/

于 2013-09-22T10:34:07.463 回答