How can I change the label for css style?

Question

I have a checkbox with label.

<input type="checkbox" name="comment" id="abc1" value="the value." 
 onclick="createOrder()"><label for="abc1" onclick="createOrder()" 
 title="title"> onscreen text for this checkbox </label>

In a javascript function, I want to change the appearance of the input. Here is an example that works (changes the element's visibility) but is not what I want to do:

if (n !== -1) {
     document.getElementById(id).style.visibility = "hidden";
    }

However, I don't want to make it invisible. I want to change the text color of the words associated with the checkbox ("onscreen text for this checkbox") The text would change from the default black to grey.

I don't know how to change the "label for" style. Can anyone help change the javascript? The result would simply change the color of the text.

Why do you have onClick on `label`? Whats `id` here, is it the `label` id? — Zee, May 01 '15 at 08:04
Clicking the text next to the checkbox will also check the checkbox. id is the input id. — user3283304, May 01 '15 at 08:46

score 3 · Accepted Answer · edited May 01 '15 at 08:12

3

As you said the code you're trying works so to target next node, you can use .nextSibling

if (n !== -1) {
   document.getElementById(id).nextSibling.style.color= "#c8c8c8"; //color you need"
}
else{
  document.getElementById(id).nextSibling.style.color= "#fefefe"; //Default color
}

edited May 01 '15 at 08:12

vinayakj

5,591
3
28
48

answered May 01 '15 at 08:04

Dhaval Marthak

17,246
6
46
68

This looks simple and straight-forward, but it doesn't seem to work for me. I am using the most current Chrome. Could it be because the label doesn't have a predefined style? – user3283304 May 01 '15 at 08:23
No, it should work whether label has predefined style or not. Can you post full code so that i can look again into it? – Dhaval Marthak May 01 '15 at 08:27
You have all the relevant code. I check a variable n and based on the result I want to change the id. My given code works to turn the element invisible. So, it works to that point. I want to replace the visibility code with a color change. Perhaps the CSS style sheet is overriding it? – user3283304 May 01 '15 at 08:33
`nextSibling` might return you a text node and not the label. use `nextElementSibling` instead. – Banana May 01 '15 at 08:33

score 0 · Answer 2 · answered May 01 '15 at 08:07

You can do something like using jQuery: jQuery:

$(document).ready(function(ee){ 
 $("#abc1").click(function(){   
     if ($(this).is(':checked')) {       
         $(this).next().css({"color": "Red"});
     }else
     {
         $(this).next().css({"color": "black"});
     }
});

});

HTML:

 <input type="checkbox" name="comment" id="abc1" value="the value." ><label for="abc1" title="title"> onscreen text for this checkbox </label>

This should work.

Thanks

score 0 · Answer 3 · edited May 23 '17 at 11:50

it can easily be achieved, doesnt matter where the label is located or how many are there.

there is an answer Here that shows how to get elements by their attributes.

lets take the function from that answer, adjust it and use it for your question:

//get all labels with for=abc1 attribute
el=getLabelByForAttribute("abc1");

//loop through those labels and change their style
el.forEach(function(elem,idx){
    elem.style["color"]="grey";
});

function getLabelByForAttribute(a)
{
  var matchingElements = [];
  //get all labels in the document
  var allElements = document.getElementsByTagName('label');
  for (var i = 0, n = allElements.length; i < n; i++)
  {
    //if those labels have the required 'for' attribute
    if (allElements[i].getAttribute("for") ==a)
    {
      // Element exists with attribute. Add to array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

<input type="checkbox" name="comment" id="abc1" value="the value." onclick="createOrder()">
<label for="abc1" onclick="createOrder()" title="title">onscreen text for this checkbox</label>

How can I change the label for css style?

3 Answers3