Question

In this table I have 1 checkbox per row. How to return the list of Categorynames from all the rows that are checked by the checkbox?

html:

<tbody>
    <table>
        <tr style="height: auto" role="row" class="jqgfirstrow">
            <td style="height: 0px; width: 55px;" role="gridcell">
            </td>
            <td style="height: 0px; width: 150px;" role="gridcell">
            </td>
            <td style="height: 0px; width: 150px;" role="gridcell">
            </td>
        </tr>
        <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="1">
            <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
                <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden"
                    value="false" name="Catchecked">
            </td>
            <td aria-describedby="jqgCategories_Name" title="Beverages" style="text-align: left;"
                role="gridcell">
                Beverages
            </td>
            <td aria-describedby="jqgCategories_Description" title="Soft drinks, coffees, teas, beers, and ales"
                style="text-align: left;" role="gridcell">
                Soft drinks, coffees, teas, beers, and ales
            </td>
        </tr>
        <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="2">
            <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
                <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden"
                    value="false" name="Catchecked">
            </td>
            <td aria-describedby="jqgCategories_Name" title="Condiments" style="text-align: left;"
                role="gridcell">
                Condiments
            </td>
            <td aria-describedby="jqgCategories_Description" title="Sweet and savory sauces, relishes, spreads, and seasonings"
                style="text-align: left;" role="gridcell">
                Sweet and savory sauces, relishes, spreads, and seasonings
            </td>
        </tr>
        <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="7">
            <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
                <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden"
                    value="false" name="Catchecked">
            </td>
            <td aria-describedby="jqgCategories_Name" title="Produce" style="text-align: left;"
                role="gridcell">
                Produce
            </td>
            <td aria-describedby="jqgCategories_Description" title="Dried fruit and bean curd"
                style="text-align: left;" role="gridcell">
                Dried fruit and bean curd
            </td>
        </tr>
        <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="8">
            <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
                <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden"
                    value="false" name="Catchecked">
            </td>
            <td aria-describedby="jqgCategories_Name" title="Seafood" style="text-align: left;"
                role="gridcell">
                Seafood
            </td>
            <td aria-describedby="jqgCategories_Description" title="Seaweed and fish" style="text-align: left;"
                role="gridcell">
                Seaweed and fish
            </td>
        </tr>
    </table>
</tbody>

Answer 1

Put this in some function whenever you need to collect the categories from the table :

var table = ...; // get the table DOMElement or jQuery object here
var categories = [];
$(':checkbox[checked]', table).each(function() {
    categories.push($(this).parent().next().text().trim());
});
//alert(categories);   // return an array of categories

Here’s the jsFiddle.