Question

我的表格如下：

<table id="tableOne" class="yui">
    <thead>
        <tr>
            <th>
                <div><input type="checkbox" /></div>
            </th>
            <th>
                <div>Name</div>
            </th>
            <th>
                <div>English</div>
            </th>
            <th>
                <div>Spanish</div>
            </th>
            <th>
                <div>Math</div>
            </th>
            <th>
                <div>History</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div><input type="checkbox" /></div>
            </td>
            <td>
                <div>Bob Smith</div>
            </td>
            <td>
                <div>80</div>
            </td>
            <td>
                <div>70</div>
            </td>
            <td>
                <div><input type="checkbox" /></div>
            </td>
            <td>
                <div><input type="checkbox" /></div>
            </td>
        </tr>
        <tr>
            <td>
                <div><input type="checkbox" /></div>
            </td>
            <td>
                <div>George Jones</div>
            </td>
            <td>
                <div>90</div>
            </td>
            <td>88</div>
            </td>
            <td>
                <div><input type="checkbox" /></div>
            </td>
            <td>
                <div><input type="checkbox" /></div>
            </td>
        </tr>
    </tbody>
</table>

点击标题中的复选框后，我使用以下javascript检查/取消选中第一列中的所有复选框。

$(document).ready(function() {
    $("#tableOne thead tr th:first input:checkbox").click(function() {
        var checkedStatus = this.checked;
        $("#tableOne tbody tr td:first-child input:checkbox").each(function() {
            this.checked = checkedStatus;
        });
    });
});

它不起作用。当我单击标题的复选框时，第一列中的所有复选框都未被选中。我知道我在这里做错了什么。因为<tr>代码位于<div>，我需要在选择时在某处提供此<div>。但我无法弄清楚Javascript中这个div的确切位置。我尝试了一些组合，但它们似乎不起作用。

请帮助。

编辑：我在HTML页面中有多个表格，我只希望这个表格受到影响。此外，只需要检查第一列中的复选框。

再次编辑：抱歉，我的表格以上述方式呈现。更改了表格html。

Answer 1

您的HTML代码已损坏，这会使您的代码在某些浏览器（包括Internet Explorer）中失败。你的表格单元格周围不能有div标签。

不同的浏览器以不同方式处理损坏的代码。例如，Firefox将div标签移到表外，因此它们不会破坏您的代码。 Internet Explorer将表格单元格移动到div标签之外，但在表格单元格之前的表格行中仍然存在无名称标记，因此:first-child选择器不起作用，因为表格单元格不是第一个子单元格表格行。

如果您删除div标签，它可以正常工作：http://jsfiddle.net/Guffa/jKxNF/1/

在IE9，Firefox，Chrome，Safari，Opera中进行测试

Answer 2

首先，你的HTML无效，因为TR标签在DIV中，但这不应该是jQuery的问题。我看不到你的代码有什么问题，但它肯定可以简化。以下方法应该有效：

$("#tableOne thead input:checkbox").click(function() {
    $("#tableOne tbody input:checkbox").prop('checked', $(this).is(':checked'));
});

请注意，您不必指定每个子节点。 $('#tableOne thead :checkbox')会在thead中找到所有复选框，无论是否在任何嵌套的子标记中都有这些复选框。但是，$('#tableOne thead > :checkbox')会强制要求该复选框是thead的直接子项。

Answer 3

//所有复选框最初都为空

var checked = false;
$(element).click(function(){
      if (checked){
          $("#tableOne").find("input[type=checkbox]").removeAttr("checked");
          checked = false;
      }
      else{
          $("#formId").find("input[type=checkbox]").setAttr("checked", "checked");
          checked = true;
      }
});

Answer 4

我认为这是最简单的方法，只需将chk作为ID前缀，如chkPresent123等

$("#invoiceReceiptTable > tbody > tr").each(function (i, el) {

       $($(this).find("input[id^=chk]")).prop('checked', true);

    }
});

这就是你可以获得所有选中复选框的方法。所有已检查的ID都将在$ ID

中

$IDs = $("#invoiceReceiptTable input:checkbox:checked").map(function () {
    var id = $(this).attr("id");
    return id;
}).get();

使用jQuery检查表中的所有复选框

4 个答案: