javascript - 当我在代码中使用样式化类时，为什么 javascript 代码不起作用？

Question

<label for="q11"><input type="checkbox" class="styled" value=" Good" name="q11[]" id="q11_1">Good</label>
<label for="q11"><input type="checkbox" class="styled" value=" Poor" name="q11[]" id="q11_2">Poor</label>
<label for="q11"><input type="checkbox" class="styled" value=" Good" name="q11[]" id="q11_1">Good</label>
<label for="q11"><input type="checkbox" class="styled" value=" Poor" name="q11[]" id="q11_2">Poor</label>

这是我的代码，我想要这样的东西。意味着当我选中一个复选框时，另一个复选框应该取消选中。

<input type="checkbox" class="styled" onclick="document.getElementById(q11_2).checked=false;" value="Transfer of risk > Poor" name="q11[]" id="q11_1">Poor</label>
<input type="checkbox" class="styled" onclick="document.getElementById(q11_1).checked=false;" value="Transfer of risk > Poor" name="q11[]" id="q11_2">Poor</label>

但问题是，当我使用样式类时，此代码不起作用。

onclick="document.getElementById(q11_1).checked=false

但是当我删除样式类时它可以正常工作。 我的样式类代码是这样的。

            if(inputs[a].checked == true) {
                if(inputs[a].type == "checkbox") {
                    position = "0 -" + (checkboxHeight*2) + "px";
                    span[a].style.backgroundPosition = position;
                } else {
                    position = "0 -" + (radioHeight*2) + "px";
                    span[a].style.backgroundPosition = position;
                }
            }
            inputs[a].parentNode.insertBefore(span[a], inputs[a]);
            inputs[a].onchange = Custom.clear;
            if(!inputs[a].getAttribute("disabled")) {
                span[a].onmousedown = Custom.pushed;
                span[a].onmouseup = Custom.check;
            } else {
                span[a].className = span[a].className += " disabled";
            }
        }
    }
    inputs = document.getElementsByTagName("select");
    for(a = 0; a < inputs.length; a++) {
        if(inputs[a].className == "styled") {
            option = inputs[a].getElementsByTagName("option");
            active = option[0].childNodes[0].nodeValue;
            textnode = document.createTextNode(active);
            for(b = 0; b < option.length; b++) {
                if(option[b].selected == true) {
                    textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
                }
            }
            span[a] = document.createElement("span");
            span[a].className = "select";
            span[a].id = "select" + inputs[a].name;
            span[a].appendChild(textnode);
            inputs[a].parentNode.insertBefore(span[a], inputs[a]);
            if(!inputs[a].getAttribute("disabled")) {
                inputs[a].onchange = Custom.choose;
            } else {
                inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
            }
        }
    }
    document.onmouseup = Custom.clear;
},
pushed: function() {
    element = this.nextSibling;
    if(element.checked == true && element.type == "checkbox") {
        this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
    } else if(element.checked == true && element.type == "radio") {
        this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
    } else if(element.checked != true && element.type == "checkbox") {
        this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
    } else {
        this.style.backgroundPosition = "0 -" + radioHeight + "px";
    }
},
check: function() {
    element = this.nextSibling;
    if(element.checked == true && element.type == "checkbox") {
        this.style.backgroundPosition = "0 0";
        element.checked = false;
    } else {
        if(element.type == "checkbox") {
            this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
        } else {
            this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
            group = this.nextSibling.name;
            inputs = document.getElementsByTagName("input");
            for(a = 0; a < inputs.length; a++) {
                if(inputs[a].name == group && inputs[a] != this.nextSibling) {
                    inputs[a].previousSibling.style.backgroundPosition = "0 0";
                }
            }
        }
        element.checked = true;
    }
},

    clear: function() {
    inputs = document.getElementsByTagName("input");
    for(var b = 0; b < inputs.length; b++) {
        if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
        } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
        } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
        } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
        }
    }
},
choose: function() {
    option = this.getElementsByTagName("option");
    for(d = 0; d < option.length; d++) {
        if(option[d].selected == true) {
            document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
        }
    }
}

} window.onload = Custom.init;

Answer 1

你尝试过吗:

document.forms['foo'].bar[0].checked=false;