Javascript & ASP.NET - Manage CheckBoxList

Question

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)

take a look at how CheckBoxList is rendered in HTML, what objects/elements are there and give it a try. Please post your code attempt, don't ask for a complete code to be written for you. — Comfortably Numb
– Comfortably Numb, Commented May 15, 2013 at 11:10

Darin Dimitrov · Accepted Answer · 2013-05-15 11:35:10Z

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.

edited May 15, 2013 at 11:35

answered May 15, 2013 at 11:29

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

lugeno Over a year ago

Hi Darin. Thank you for your reply. When executing your code I get the following exception: "Microsoft JScript runtime error: JScript object expected" at var checkboxes etc..

Darin Dimitrov Over a year ago

Can you test with a real webbrowser and tell the exact error message you are getting in the console? By real webbrowser I mean anything else than IE.

lugeno Over a year ago

I can only test with IE cause the application has to run only on it

Darin Dimitrov Over a year ago

Alright, but at least when developing you could use a real webbrowser in order to know the precise error messages and location. By the way I tested with IE10 and it worked fine.

Darin Dimitrov Over a year ago

OMG, sorry, it's been for ages that I wiped it out from existence and cannot test. Good luck.

|

peterfoldi · Accepted Answer · 2013-05-15 14:27:47Z

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

lugeno · Accepted Answer · 2013-05-15 15:07:34Z

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.

Collectives™ on Stack Overflow

Javascript & ASP.NET - Manage CheckBoxList

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related