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>

Here is my code code I want some thing like this. Means when I check one checkbox the other checkbox should be unchech.

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

But the problem is this when i use styled class this code not work.

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

but when i remove styled class it works properly.
My style class code is this.

            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

I think you need to quote the identifier.

onclick="document.getElementById('q11_2').checked=false"

Also, you might want to escape the > to > in your value attribute.