Question

我正在制作核对表。我正在通过javascript动态添加复选框并为它们添加标签。
现在我想当我选中一个复选框时，标签的背景颜色会改变，表明该项目已被选中但“label”标签中不允许使用onClick属性。所以我将文本添加为复选框的子项，但它不可见，但是onclick事件正在处理复选框。

var chked = document.createElement("input");
            chked.type = 'checkbox';
            chked.value = data[friendIndex].id;
            chked.id = friendIndex;
            chked.width = '300';
            chked.onclick =  function (){document.getElementById(this.id).style.backgroundColor='#4285f4';};
            var label = document.createElement('label');
            label.htmlFor = friendIndex;
            label.id = friendIndex;
            label.setAttribute('onclick' ,function (){document.getElementById(this.id).style.backgroundColor='#4285f4';});
            label.appendChild(document.createTextNode(data[friendIndex].name));
            chked.appendChild(document.createTextNode(data[friendIndex].name));
            var mybr=document.createElement('br'); 
            chklstTarget.appendChild(chked);
            chklstTarget.appendChild(label);
            chklstTarget.appendChild(mybr);

Answer 1

您是否需要通过Javascript执行此操作？您只能使用CSS执行此操作。

HTML：

<input type="checkbox" />
<label>Check Me!</label>

CSS：

input[type=checkbox] + label {
    color: black;
}
input[type=checkbox]:checked + label {
    background: red;
}

DEMO HERE

Answer 2

使用jquery点击功能切换班级

$("input[type=checkbox]").change(function() {
        $(this).parent().toggleClass("checked");
    });

<强> DEMO

Answer 3

如何将CheckBox附加到Label 然后你可以点击ChkeckBox和Label区域获得CheckBox的onClick事件。
并更改标签的颜色。

例）

label.appendChild( chked );
label.appendChild( textToDisplay );
chklstTarget.appendChild( label );

通过javascript更改标签onClick的背景颜色

3 个答案:

HTML：

CSS：