選中/取消選中復選框時更改相應標簽的文本

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>