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

change text of corresponding label when checkbox is checked/unchecked

提问by John

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

我无法让这个 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";
            }
        }

回答by Swaff

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 hereon jsFiddle

在 jsFiddle 上看到这里

回答by jessegavin

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

回答by Jmoney38

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

getElementById 需要一个字符串，而不是一个元素。我假设您将字符串传递给 yesno 函数...

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

一个问题是 document.getElementById() 应该接受标签，而不是标签变量。

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

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

回答by jls

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

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

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

回答by Zikes

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

我在 jsfiddle 中制作了一个纯 JS 版本：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.

如果你使用像 jQuery 这样的框架，我可以让它看起来更简洁一些。否则，您需要修改它以使用 attachEvent（如果 IE 可用）。

回答by Quintin Robinson

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

你很接近，但你正在调用getElementById()一个你已经拥有的元素..

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/

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