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的锚标签，绑定一个click事件处理程序，当点击$（'table.list'）选择带有类列表的表时， .children（'input'）选择这些表中的输入，并且attr部分设置checked属性以检查锚标记是否具有id select_on，否则设置为。

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

3 个答案: