ASP.NET - Get selected CheckBox value in DataList

• Download source code

Introduction

A while ago, someone at the forum had asked "how to retrieve the checkbox value from the ASP.NET DataList control". I took the opportunity to put together a sample code to achieve the requirement through the Code Behind and jQuery.

In this example, I'm using HTML Input (CheckBox) control in the DataList. Shown in listing 1 is the code used to get the selected checkbox value. The code will loop through the DataListItemCollection, find the CheckBox control by ID, then do something if it was checked.

void GetCheckedBox()
    {
        foreach (DataListItem li in BooksDataList.Items)
        {
            HtmlInputCheckBox cb = li.FindControl("FavChkBox") as HtmlInputCheckBox;

            if (cb != null)
            {
                if (cb.Checked)
                {
                    if (LblText.Text.Length > 0)
                        LblText.Text += ", ";

                    LblText.Text += cb.Value;
                }
            }
        }
    }

Let's say we decide not to write code to loop through the DataListItemCollection, we can collect the selected CheckBox value through the client-side script. Shown in Listing 2 is the jQuery script used to collect the selected CheckBox value. When the user hits the submit button, the script will retrieve all the CheckBox values in the DataList control, stored in an array and later save it to a hidden field.

<script type="text/javascript">
        $(document).ready(function () {
            //check all
             $("[id$='chkAll']").click(
             function () {
                 $("INPUT[type='checkbox']").attr('checked', 
			$("[id$='chkAll']").is(':checked'));
             });

            $("[id$='btnSubmit']").click(function () {
                var ISBN = [];

                $("[id$='BooksDataList'] 
		input[type=checkbox]:checked").each(function () {
                    ISBN.push($(this).val());
                });

                $("[id$='HiddenField1']").val(ISBN);
            });
        });
    </script>

In the code behind, we can retrieve the hidden field value like this "HiddenField1.Value;"

Conclusion

I hope someone will find this information useful and that it will make your programming job easier. If you find any bugs or disagree with the contents or want to help improve this article, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and exploring it in order to grasp the full concept of it because I might miss some important information in this article. Please send me an email if you want to help improve this article.

Watch This Script in Action

• Demo