Find selected CheckBoxes in your GridView control

Tweet

I was recently asked a question on a forum in regards to what rows are selected when you've got an ASP.NET GridView filled with CheckBoxes on a page. The answer is made simple thanks to jQuery. This is the sample table below:

When the user clicks the button they can find all the selected checked check boxes with the following code:

<script language="javascript" type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
    $(function() {
        $("#GetSelectedValues").click(function(e) {
            $("#GridView1 input:checked").each(function() {
                alert($(this).next("label").text());               
            });
            e.preventDefault();
        });
    });
</script>

Nice and simple.

A recommended way would be to add a class to the GridView and then handle this requirement in the following manner:

Add a class attribute to the GridView (say gv)

<asp:GridView ID="GridView1" class="gv">

and access the control like this:

$(".gv input:checked")

This approach would work even in a MasterPage scenario.

Tweet

About The Author

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET and regular presenter at conferences and user groups throughout Australia. Being an ASP.NET Insider, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with JavaScript. He also blogs regularly at DotNetCurry.com. Follow him on twitter @malcolmsheridan