javascript - 在css或jquery中点击标签时需要高亮显示

Question

我需要在点击标签时突出显示它。同样，当我们选中复选框时，它也需要高亮显示。我解决了复选框问题，但无法解决标签点击问题。

我通过

解决了复选框问题

input[type=checkbox]:checked + label {
    background: #D7D5D5;
}

引用代码:http://jsfiddle.net/uU82C/

请帮助我解决 css 中的标签点击问题，如果不能则在 jquery 中解决。

Answer 1

我会更改处理“myclicktest”方法中的选择，并像这样稍微更改 css。

label.selected,
input[type=checkbox]:checked + label {
    background: #D7D5D5;
}

function myclicktest(event){
    var target = event.target;
    target.classList.toggle ("selected");
    if(target.classList.contains("selected")) {
        target.previousSibling.checked = "checked";
    }
    else {
        target.previousSibling.checked = "";
    }
}

注意:

我建议你不要像这样使用内联事件注册

onclick='myclicktest(event)'

这是非常糟糕的主意，您应该动态创建元素并注册事件处理程序。

var inputEl = document.createElement("input");
inputEl.addEventListener("click", myclicktest);