Getting Columns Checked in GridView with jQuery

Question

I have a GridView and am needing to grab column 1 and 2 (the text therein) and put that text elsewhere in the page, another textbox.

Here is what I have thus far:

 var checked = $('input:checkbox').click(function(e) {
            //place airport in textbox, txtAirport
            var loc = $("tr:has(:checkbox:checked) td:nth-child(1)");
            var ac = $("tr:has(:checkbox:checked) td:nth-child(2)");

            // txtAirport.Text = loc + ac;
            $("#<%= txtAirport.ClientID%>").val(loc + ac);
        });

the problem is I am getting {Object object} {Object object} in my textbox where I'm expecting to get a city, st and an airport. How do I clarify my "loc" and "ac" variables to give me what I need? I've tried .text and .val() to no avail.

Here is the HTML (ASP.NET Gridview):

 <asp:DataGrid ID="dgSearch" runat="server" AllowPaging="False" AllowSorting="False"
                            CellPadding="3" CellSpacing="2" ShowFooter="False" GridLines="None" AutoGenerateColumns="false">
                            <AlternatingItemStyle Wrap="False" CssClass="HeaderRowAlternate"></AlternatingItemStyle>
                            <ItemStyle Wrap="False"></ItemStyle>
                            <HeaderStyle Font-Bold="True" Wrap="False" CssClass="HeaderRowStyle"></HeaderStyle>
                            <Columns>
                                <asp:TemplateColumn HeaderText="Select">
                                    <HeaderStyle CssClass="HEADERSTYLE"></HeaderStyle>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="chkLookup" runat="server" CssClass="checkbox"></asp:CheckBox>
                                    </ItemTemplate>
                                </asp:TemplateColumn>
                                <asp:BoundColumn Visible="False" DataField="AirportID"></asp:BoundColumn>
                                <asp:BoundColumn Visible="False" DataField="City"></asp:BoundColumn>
                                <asp:BoundColumn DataField="Loc" HeaderText="Location">
                                    <HeaderStyle Wrap="False" CssClass="HEADERSTYLE"></HeaderStyle>
                                    <ItemStyle Wrap="False"></ItemStyle>
                                </asp:BoundColumn>
                                <asp:BoundColumn DataField="AirportCode" HeaderText="Airport Code">
                                    <HeaderStyle Wrap="False" CssClass="HEADERSTYLE"></HeaderStyle>
                                    <ItemStyle Wrap="False"></ItemStyle>
                                </asp:BoundColumn>
                                <asp:BoundColumn DataField="AirportName" HeaderText="Airport Name">
                                    <HeaderStyle Wrap="False" CssClass="HEADERSTYLE"></HeaderStyle>
                                    <ItemStyle Wrap="False"></ItemStyle>
                                </asp:BoundColumn>
                                <asp:BoundColumn DataField="MilesFromSource" HeaderText="Distance">
                                    <HeaderStyle Wrap="False" CssClass="HEADERSTYLE"></HeaderStyle>
                                    <ItemStyle Wrap="False"></ItemStyle>
                                </asp:BoundColumn>
                            </Columns>
                        </asp:DataGrid>

IvanH · Accepted Answer · 2013-05-16 21:49:07Z

1

jQuery returns an array or matched objects so you need to use loc[0].innerHTML or loc.html() or loc.text() instead of loc (or ac respectively).

   var checked = $('input:checkbox').click(function(e) {
        //place airport in textbox, txtAirport
        var loc = $("tr:has(:checkbox:checked) td:nth-child(2)");
        var ac = $("tr:has(:checkbox:checked) td:nth-child(3)");

        // txtAirport.Text = loc + ac;
        $("#<%= txtAirport.ClientID%>").val(loc.html() + ac.html());
    });

It is probably necessary to change numbers of cells too (1,2 -> 2,3) see http://jsfiddle.net/vXtKq/ It can be that you selector is not specific enough but if you post result of upper code or rendered HTML (from page source in your browser) the finding of solution is easier.

edited May 16, 2013 at 21:49

answered May 16, 2013 at 21:06

IvanH

5,19914 gold badges64 silver badges85 bronze badges

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

6 Comments

Matt Over a year ago

I'm using "loc" only as a variable here. Can you clarify?

IvanH Over a year ago

As I understand it loc should contain what jQuery matched (var loc = $...) but it is not a text in <td> it is jQuery object - generaly array of HTML objects. To get content of first loc.html() is used.

Matt Over a year ago

by changing it to that I get the desired column headers but not the content of the columns of the rows that were clicked.

IvanH Over a year ago

It is necessary to change the numbers too see updated answer and example.

Matt Over a year ago

I think I've got it but I need to be able to grab all of the items that were checked, not just the one. to do that I have to iterate thru this somehow?

|

Kevin · Accepted Answer · 2013-05-16 22:25:28Z

1

jQuery selectors return wrapped sets containing the selected DOM elements, so you'll need to use .text() or .html()

EDIT: OK, I've replicated your code, what you need is

$("tr:has(:checkbox:checked) td:nth-child(2)");
$("tr:has(:checkbox:checked) td:nth-child(3)");

And then to do

$("#<%= txtAirport.ClientID%>").val(loc[0].innerHTML + ac[0].innerHTML);

This will give you the text in the first and second columns (after the checkbox) of the first row (loc[1] and ac[1] for second rows etc.). The issue you had was td:nth-child(0) was returning the DOM object of the checkbox's <td> element

To loop through checked checkboxes only:

for (var i = 0; i < loc.length; i++) {
    alert(loc[i].innerHTML + " " + ac[i].innerHTML);
}

You don't need to check the checkbox is checked since the jQuery selector already does that for you

edited May 16, 2013 at 22:25

answered May 16, 2013 at 20:45

Kevin

2,0221 gold badge16 silver badges10 bronze badges

6 Comments

Matt Over a year ago

.html() gives me a ton of html, far too much actually. It's like my variables are not explicit enough.

Matt Over a year ago

for some reason I keep getting the correct column headers just not the column data.

Matt Over a year ago

I changed it to loc[1].innerHTML and ac[1].innerHTML and am getting back the first row that was checked. Now I need to add to my textbox the other values that were checked.

Kevin Over a year ago

Updated with how to loop through checked rows

Matt Over a year ago

for some reason when I loop through here it places the last item in the GridView (not the checked boxes). Any ideas?

|

Collectives™ on Stack Overflow

Getting Columns Checked in GridView with jQuery

2 Answers 2

6 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related