Javascript & ASP.NET - Manage CheckBoxList

问题

I have a CheckBoxList dinamically filled from DB.

<asp:CheckBoxList ID="chklist1" runat="server" onclick="chklist1_onclick()" />

Oce it has been filled I have several options and one of them has the text "No Response".

What I want is a javascript function that does the following:

1) If I check "No Response" all other options must be unchecked.

2) If I check at least one of the options that is not "No Response", the "No Response" option must be unchecked.

Hope to be clear. Thanks in advance.

My attempt was:

    function chklist1_onclick() {
    var chklist1 = document.getElementById('<%= chklist1.ClientID %>');
    var chkList = chklist1.getElementsByTagName("input");
    for (var i = 0; i < chkList.length; i++) {
        if (chkList[i].checked && chkList[i].value == "6") {
            for (var i = 0; i < chkList.length; i++) {
                if (chkList[i].checked && chkList[i].value != "6") {
                    chkList[i].checked = false;

                }
            }
        }
    }
}

Where 6 is the value of "No Response" item. But this way I only resolve the case 1)

回答1:

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

<script type="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 checkboxes
                        var 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.

回答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 checkboxes
             for (j = 0; j < checkboxes.length; ++j) {
                 if (checkboxes[j].value != '6') {
                     checkboxes[j].checked = false;
                 }
             }
         } else {
             // uncheck the No Response checkbox
             nonecheckbox.checked = false;
         }
    };
}

回答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.

来源：https://stackoverflow.com/questions/16563184/javascript-asp-net-manage-checkboxlist