Question

我有一些复选框，我希望在选中复选框后更改标签文字：

var listener = function() {
    document.addEventListener('change', function(e) {
            if (e.target.checked) {
                e.target.label.className = "option-selected";
            }
        }
    }
}

HTML如果您有兴趣：

<input id="0A" class="individual-checkbox" type="checkbox" value="A">
<label for="0A">A</label>
<br>
<input id="0B" class="individual-checkbox" type="checkbox" value="B">
<label for="0B">B</label>

显然，target.label不起作用。如何访问目标的标签并为其提供CSS类（纯粹使用JavaScript）？

Answer 1

要使jsFiddle正常工作，您必须更改以下内容：

修复语法错误（错过了addListener()函数调用的结束语，并且你有一个额外的结束括号。
实际上调用listener()函数使其运行。
定位实际标签，而不是您班级的复选框

有几种不同的方法来定位标签。最简单的方法是将输入包含在标签内，然后使用.parentNode从复选框中获取标签。

HTML：

<label for="0A">
    <input id="0A" class="individual-checkbox" type="checkbox" value="A">
A</label>
<br>
<label for="0B">
    <input id="0B" class="individual-checkbox" type="checkbox" value="B">
B</label>

代码：

var listener = function() {
    document.addEventListener('change', function(e) {
        if (e.target.checked) {
            e.target.parentNode.className = "option-selected";
        }
    });
}
listener();

工作jsFiddle：http://jsfiddle.net/jfriend00/s2A7W/

如果您不想更改HTML，那么您只需找到输入元素后面的label元素。

你可以这样做：

var listener = function() {
    document.addEventListener('change', function(e) {
        var label;
        if (e.target.checked) {
            label = next(e.target, "label");
            if (label) {
                label.className = "option-selected";
            }
        }
    });
}
listener();

function next(src, tag) {
    tag = tag.toUpperCase();
    while (src && src.tagName !== tag) {
        src = src.nextSibling;
    }
    return src;    
}

工作jsFiddle：http://jsfiddle.net/jfriend00/3wQKa/

仅供参考，您可能还应该限制侦听器的操作，仅当复选框实际上是目标或具有特定类名的元素或其他一些区别特征时，才能确保它是您希望此代码所针对的复选框。使用e.target.checked可能是安全的，但我不喜欢这个事件监听器响应整个页面中所有传播的更改事件的事实。

Answer 2

假设只有一个label元素与元素相关联：

e.target.labels[0].className = "option-selected";

这是一个HTML5属性，但我不知道它在旧浏览器中的支持程度如何。来源：MDN。

或者，如果IE8支持对您来说足够了，您可以使用document.querySelector明确搜索它：

var label = document.querySelector('[for=' + e.target.name + ']');

仅当您提供input元素name属性（您真正想要这样做，否则标签未正确连接到输入元素）时，此方法才有效。

最后，如果标签总是在输入之后，你可以遍历DOM：

var label = e.target.nextSibling;
while (label.nodeName !== 'LABEL') {
    label = label.nextSibling;
}

如果你重构HTML，那么input元素是label元素的子元素：

<label for="0A">
    <input id="0A" class="individual-checkbox" type="checkbox" value="A">
    A
</label>

然后您可以简单地使用e.target.parentNode来获取标签。将输入元素放在标签内部也会将标签连接到输入。

Answer 3

这样可以解决问题：

function addListener(elem) {
    // remember: checkboxes never change trair value 
    elem.addEventListener('click', function () {
        var ls = document.getElementsByTagName('label');
        for (var l = 0, ll = ls.length, lbl; l < ll; ++l) {
            lbl = ls[l];
            if ( this.id == lbl.getAttribute("for") )
            {
                lbl.className = ( this.checked ? "option-selected" : "" );
            }
        }
    });
}

请参阅http://jsfiddle.net/fGSCH/10/

_{请注意，addListener()可能无法在每个浏览器中使用。但是因为你在例子中使用它我也会使用它。}

纯Javascript目标标签

3 个答案: