Change background color of label onClick via javascript

Question

I am making a checklist. I am adding the checkboxes dynamically via javascript and adding labels for them too.
Now I want when I check a checkbox the background color of the label to change indicating the item has been selected but onClick attribute is not allowed in "label" tag. So I added the text as a child of checkbox but it is not visible but the onclick event is working on checkbox.

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

rendered html format?? r u covering input with label or bot are sepereate? — Sowmya
– Sowmya, Commented Jan 30, 2014 at 8:21

Ruddy · Accepted Answer · 2014-01-30 08:40:30Z

2

Any reason you need to do this via Javascript? You can do this using CSS only.

HTML:

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

CSS:

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

DEMO HERE

answered Jan 30, 2014 at 8:40

Ruddy

9,9435 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sowmya · Accepted Answer · 2014-01-30 08:25:41Z

0

Use jquery click function to toggle the class

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

DEMO

answered Jan 30, 2014 at 8:25

Sowmya

27k21 gold badges102 silver badges137 bronze badges

Comments

Robin Kang · Accepted Answer · 2014-01-30 08:40:01Z

0

How about append CheckBox to Label.
Then you can get CheckBox's onClick event from click ChkeckBox and Label area both.
And change label's color.

example)

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

answered Jan 30, 2014 at 8:40

Robin Kang

213 bronze badges

Collectives™ on Stack Overflow

Change background color of label onClick via javascript

3 Answers 3

HTML:

CSS:

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

HTML:

CSS:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related