I want to change the color of the text when the checkbox is checked.
First of all, i would like to inform that i'm not allowed to add any ID or class attribute to it.
Here is the example code.

 <label style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
 <input type="checkbox" name="termsChkbx" />
 </label>

As i know, we can use

document.getElementById()

document.getElementsByTagName()

document.getElemntsByClassName()

i've tried this but it doesn't work.

<script>
        function myFunction() {
    var chkbox = document.getElementsByTagName("label");
    if(chkbox.checked){
        document.getElementsByTagName("label").style.color = "#000000";
    }
}
</script>

Since the code do not contain any ID and Class attribute.
So how can it be done?

I want to change the color of the text when the checkbox is checked.
First of all, i would like to inform that i'm not allowed to add any ID or class attribute to it.
Here is the example code.

 <label style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
 <input type="checkbox" name="termsChkbx" />
 </label>

As i know, we can use

document.getElementById()

document.getElementsByTagName()

document.getElemntsByClassName()

i've tried this but it doesn't work.

<script>
        function myFunction() {
    var chkbox = document.getElementsByTagName("label");
    if(chkbox.checked){
        document.getElementsByTagName("label").style.color = "#000000";
    }
}
</script>

Since the code do not contain any ID and Class attribute.
So how can it be done?

• javascript
• html

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 10, 2017 at 6:33 ccsccs 15122 silver badges1515 bronze badges 6

• You can't access an element with no ID or class unless you use JQuery, why not just add an ID ? – Koby Douek Commented Mar 10, 2017 at 6:38
• 1 @KobyDouek Actually you can, with document.querySelector. Although you're right that adding an ID would be easier – qxz Commented Mar 10, 2017 at 6:38
• 1 @qxz What if he has more than 1 label ? – Koby Douek Commented Mar 10, 2017 at 6:39
• 1 @KobyDouek :nth_child()? – qxz Commented Mar 10, 2017 at 6:41
• 1 As the checkbox has a name, you could also use document.getElementsByName – qxz Commented Mar 10, 2017 at 6:44

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 4

A pure CSS solution, with some change in HTML structure.

input[type=checkbox]:checked + span{
  color:blue !important;
  font-weight:normal !important;
}

<label style="color: #FF0000; font-weight: bold;">
 <input type="checkbox" name="termsChkbx" />
 <span>I have read and agree to the terms and conditions</span>
 
 </label>

You can assign a click handler and pass current element to it. Then you can navigate to parent using current element and update its properties.

function updateColor(el){
  el.parentNode.style.color = el.checked ? "blue" : "#FF0000"
}

<label style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
 <input type="checkbox" name="termsChkbx" onclick="updateColor(this)"/>
 </label>

querySelector Approach

function updateColor(){
  this.parentNode.style.color = this.checked ? "blue" : "#FF0000"
}

var chks = document.querySelectorAll('input[name="termsChkbx"]');

for(var i =0; i< chks.length; i++){
  chks[i].addEventListener("click", updateColor)
}

<label style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
 <input type="checkbox" name="termsChkbx"/>
 </label>

You can use jqueryselector (it will select al the element and put them in an array and then select the element [0] of it First_checkbox = document.querySelectorAll("input[type='checkbox']")[0];

if you are using jQuery.

$(document).ready(function(){
  $("input[type=checkbox]").on('click', function(){
    $(this).parent().toggleClass("black");
  })
})

.black{
color:black !important;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
 <input type="checkbox" name="termsChkbx" />
 </label>