选中/取消选中复选框时更改相应标签的文本

Question

我无法让这个 javascript 函数工作。 任何帮助将非常感激！

---

<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

我将您的代码更改为此，它似乎可以工作：

function yesno(thecheckbox, thelabel) {

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

看到这里 jsFiddle

Answer 2

您还可以使其更短，更易读，如下所示：

<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使用字符串，而不是Element。 我假设您正在将字符串传递给yesno函数...

一个问题是document.getElementById（）应该带有标签，而不是labelvar。

另外，请确保您的复选框和“标签”（无论它是什么HTML元素）都具有id =“”属性。

Answer 4

该问题是由于将labelvar传递给document.getElementById引起的。 您已经通过设置var labelvar = document.getElementById来检索对元素的引用，因此可以将if语句更改为

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

Answer 5

我在jsfiddle中制作了一个纯JS版本： http : //jsfiddle.net/Zikes/wpwEW/

如果您使用的是jQuery之类的框架，则可以使它看起来更简洁。 否则，如果为了IE而可用，则需要对其进行修改以使用attachEvent。

Answer 6

您已经接近，但是您正在对已经具有的元素调用getElementById() 。

尝试这个

        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";
            }
        }

工作示例： http : //jsfiddle.net/QmkDB/

Answer 7

因为我现在每天都会使用它！

 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>