Javascript & Asp.net - Manage Checkboxlist

I have a CheckBoxList dinamically filled from DB. Oce it has been filled I have several option

Solution 1:

Assuming that the No Response checkbox has value="" you could try the following script:

<scripttype="text/javascript">window.onload = function () {
        var noResponseCheckBoxFilter = function(item) {
            return item.value == '';
        };
        var otherCheckboxesFilter = function(item) {
            return !noResponseCheckBoxFilter(item);
        };

        var childInputs = document.getElementById('<%= chklist1.ClientID %>').getElementsByTagName('input');
        var checkboxes = Array.prototype.slice.call(childInputs, 0).filter(function (item) {
            return item.type == 'checkbox';
        });
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].onclick = function () {
                if (this.value == '') {
                    if (this.checked) {
                        // uncheck the other checkboxesvar otherCheckboxes = checkboxes.filter(otherCheckboxesFilter);
                        for (var j = 0; j < otherCheckboxes.length; j++) {
                            otherCheckboxes[j].checked = false;
                        }
                    }
                } else {
                    // uncheck the No Response checkbox
                    checkboxes.filter(noResponseCheckBoxFilter)[0].checked = false;
                }
            };
        }
    };
</script>

If your No Response checkbox has a different value than the empty string simply adapt the tests in the previous example.

Solution 2:

Slightly modified version of Darin's solution, I think this one is IE8 compatible.

var checkBoxList = document.getElementById('<%= chklist1.ClientID %>');
var checkboxes = checkBoxList.querySelectorAll('input[type=checkbox]');
var nonecheckbox = checkBoxList.querySelectorAll("input[value='6']")[0];
var i, j;
for (i = 0; i < checkboxes.length; ++i) {
     checkboxes[i].onclick = function () {
         if (this.value == '6' && this.checked) {
             // uncheck the other checkboxesfor (j = 0; j < checkboxes.length; ++j) {
                 if (checkboxes[j].value != '6') {
                     checkboxes[j].checked = false;
                 }
             }
         } else {
             // uncheck the No Response checkbox
             nonecheckbox.checked = false;
         }
    };
}

Solution 3:

I solved with the following code:

window.onload = function () {
    var chklist1 = document.getElementById('<%= chklist1.ClientID %>');
    var chkList = chklist1.getElementsByTagName("input");
    for (var i = 0; i < chkList.length; i++) {
        chkList[i].onclick = function () {

            if (this.checked) {
                if (this.value == "6") {
                    for (var i = 0; i < chkList.length; i++) {
                        if (chkList[i].value != "6") {
                            chkList[i].checked = false;
                        }
                    }
                }
                else {
                    for (var i = 0; i < chkList.length; i++) {
                        if (chkList[i].value == "6") {
                            chkList[i].checked = false;
                        }
                    }
                }
            }

        };
    }
};

and removed the onclick event in the asp tag.