使用jQuery在下一行的表中选择控件

Question

我有一张桌子：在第一行我有一个可以点击的锚点，在第二行 - <asp:CheckboxList /> 扩展到另一个表格。

如何使用 jQuery 访问该表中的输入？我想用一个链接全选，用另一个链接取消全选。

<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_ctl00_listCheck_1">Amount</label>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

我尝试了$(this).parent().('#list > input')，但它不起作用。我不熟悉jQuery，所以请帮忙。谢谢！

Answer 1

这是我认为你需要的 jQuery：

// 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');
});

您需要将链接更改为：

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

同样，对于取消选择，jQuery：

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

链接：

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

因为不这样做会伤害我，所以我必须警告不要使用表格来布置表单。现在这是非常糟糕的做法，您可以使用 div 和 CSS 制作一个看起来一样好但更灵活的布局。我会去：

<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>

编辑：马克说得对，应该是removeAttr(checked)，而不是attr('checked',null);

Answer 2

只需定位所有复选框并设置复选框即可。

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

如果你想取消勾选

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

另一种选择是使用toggle()，它可用于切换复选框的关闭状态。

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

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

jsfiddle 上的代码示例。

Answer 3

我会从您的锚标记中删除任何 dhtml 代码，摆脱 onclick 并将 href 更改为仅 #。使用 jquery，您只需要一个类或 id。

所以你应该有：

在您的 html 中：

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

在您的 javascript 中：

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

所以这段代码正在做的是 $('a.toggle_checks') 选择所有带有类 toggle_checks 的锚标记，绑定点击事件处理程序，当点击 $('table.list') 选择带有类列表的表， .children('input') 选择这些表中的输入，并且 attr 部分将选中的属性设置为检查锚标记是否具有 id select_on，否则不检查。