Select controls in table in next row using jQuery

I have a table: in first row I have an anchor to click, in second - <asp:CheckboxList /> expanding to another table.

How can I access inputs inside that table using jQuery? I want to select all using one link, and deselect all using another one.

<table>
    <tr>
        <td>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <!-- Anchor to click -->
                            <a onclick="do stuff" href="javascript://">Select all</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <!-- CheckboxList -->
            <table id="ctl00_commonForm_ctl00_ctl00_listCheck" class="list" border="0">
                <tbody>
                    <tr>
                        <td>
                            <!-- input to select -->
                            <input id="ctl00_commonForm_ctl00_ctl00_listCheck_0" name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="ctl00_commonForm_ctl00_ctl00_listCheck_1" name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_c开发者_如何学编程tl00_listCheck_1">Amount</label>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

I tried $(this).parent().('#list > input') but it doesn't work. I'm not familiar with jQuery, so please help. Thanks!

This is the jQuery I think you need:

// When the select link is clicked
$('#selectall').click( function ( ) {
   \\ For each checkbox inside an element with class "link" set to checked
    $('.list input[type=checkbox]').attr('checked','checked');
});

You need to change your link to this:

<a id="selectall" href="javascript:void( );">Select all</a>

Similarly, for deselect, jQuery:

$('#deselectall').click( function ( ) {
    $('.list input[type=checkbox]').removeAttr('checked');
});

Link:

<a id="deselectall" href="javascript:void( );">Select all</a>

Because it would hurt me not to, I've got to warn against using tables for laying out your form. It's very bad practice these days, and you can make a layout that looks as good, but is more flexible, using divs and CSS. I'd go for:

<div id="select_links">
    <!-- Anchor to click -->
    <a id="selectall" href="javascript:void( );">Select all</a>
    <a id="deselectall" href="javascript:void( );">Deselect all</a>
</div>
<div class="list">
    <div class="listItem">
        <input id="ctl00_commonForm_ctl00_ctl00_listCheck_0"
               name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked"
               type="checkbox">
               <label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
    </div>
    <div class="listItem">
        <input id="ctl00_commonForm_ctl00_ctl00_listCheck_1"
               name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked"
               type="checkbox">
        <label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
    </div>
</div>

EDIT: Mark's right, that should have been removeAttr(checked), not attr('checked',null);

It is as simple as just targeting all checkboxes and setting the checkbox.

$("#doIt").click(function(){
    $("input[type='checkbox']").attr("checked", true);
});

If you want to remove the check

$("#doIt").click(function(){
    $("input[type='checkbox']").removeAttr("checked");
});

Another option would be to use toggle() which can be used to toggle checkboxes on an off.

$("#doIt").toggle(function() {
    $(this).text("Select All");
    $("input[type='checkbox']").removeAttr("checked");

}, function() {
    $(this).text("Deselect All");
    $("input[type='checkbox']").attr("checked", true);
});

Code example on jsfiddle.

I would remove any dhtml code from your anchor tag, get rid of the onclick and change the href to just #. With jquery all you need is a class or id.

so you should have:

in your html:

<a id="select_on" class="toggle_checks" href="#">Select all</a>
<a class="toggle_checks" href="#">Select none</a>

in your javascript:

$('a.toggle_checks').click(function(){
   $('table.list').children('input').attr('checked', this.id == 'select_on');
});

so what this code is doing is $('a.toggle_checks') is selecting all anchor tags with class toggle_checks, binding a click event handler, when clicked $('table.list') selects the tables with class list, .children('input') selects the inputs within those tables, and the attr part sets the checked attribute to checked if the anchor tag has the id select_on and not if otherwise.