change text of corresponding label when checkbox is checked/unchecked

Question

I can't get this javascript function to work. Any help would be much appreciated!

---

<input type="checkbox" class="checkit" name="smoking" id="smoking" value="1" onclick="yesno('smoking','yesnos');" /><label for="smoking" name="yesnos" id="yesnos">No</label>

        function yesno(thecheckbox, thelabel){
            var checkboxvar = document.getElementById(thecheckbox);
            var labelvar = document.getElementById(thelabel);
            if (checkboxvar.checked == false){
                document.getElementById(labelvar).innerHTML = "No";
            }
            else{
                document.getElementById(labelvar).innerHTML = "Yes";
            }
        }

Answer 1

I changed your code to this and it seems to work:

function yesno(thecheckbox, thelabel) {

    var checkboxvar = document.getElementById(thecheckbox);
    var labelvar = document.getElementById(thelabel);
    if (!checkboxvar.checked) {
        labelvar.innerHTML = "No";
    }
    else {
        labelvar.innerHTML = "Yes";
    }
}

See here on jsFiddle

Answer 2

You can also make it shorter and more readable like so:

<input type="checkbox" class="checkit" 
  name="smoking" id="smoking" value="1" onclick="yesno(this, 'yesnos');" />
<label for="smoking" name="yesnos" id="yesnos">No</label>


function yesno(chk, label) {
    document.getElementById(label).innerHTML = chk.checked ? "Yes" : "No";
}

Answer 3

getElementById takes a string, not an Element. I'm assuming you're passing strings to the yesno function...

One problem is that document.getElementById() should take in thelabel, NOT labelvar.

Also, make sure your checkbox and "label" (whatever HTML element it is) have an id="" attribute.

Answer 4

The problem is caused by passing labelvar to document.getElementById. You've already retrieved a reference to the element by setting var labelvar = document.getElementById so your if statement can be changed to

if (checkboxvar.checked == false){
  labelvar.innerHTML = "No";
}
else{
  labelvar.innerHTML = "Yes";
}

Answer 5

I've made a pure JS version in jsfiddle here: http://jsfiddle.net/Zikes/wpwEW/

If you're using a framework like jQuery I can make that look a bit cleaner. Otherwise you'll need to modify it to use attachEvent if available for IE's sake.

Answer 6

You were close but you are calling getElementById() on an element that you already have..

Try this

        function yesno(thecheckbox, thelabel){
            var checkboxvar = document.getElementById(thecheckbox);
            var labelvar = document.getElementById(thelabel);
            if (checkboxvar.checked == false){
                labelvar.innerHTML = "No";
            }
            else{
                labelvar.innerHTML = "Yes";
            }
        }

Working example: http://jsfiddle.net/QmkDB/

Answer 7

As i would use it now a day!

 document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) { checkbox.addEventListener('change', function (event) { let checkboxLabel = document.querySelector('label[for="'+checkbox.name+'"]'); if (checkboxLabel) checkboxLabel.textContent = checkbox.checked?"ON":"OFF"; }); });

 <input type="checkbox" name="myCheckbox"> <label for="myCheckbox">OFF</label>