1

我的表如下所示：

<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>在选择时提供这个。但我无法弄清楚div在 Javascript 中的确切位置。我已经尝试了一些组合，但它们似乎不起作用。

请帮忙。

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

再次编辑：对不起，我的表格正在以上述方式呈现。更改了表格 html。

4

4 回答 4

1

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

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

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

在 IE9、Firefox、Chrome、Safari、Opera 中测试

于 2012-06-05T07:27:05.583 回答
0

// 一开始所有的复选框都是空的 

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;
      }
});
于 2012-06-05T07:21:55.857 回答
0

首先，您的 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.

于 2012-06-05T07:19:50.473 回答
0

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

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

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

    }
});

这就是您如何获得所有选中的复选框。所有检查的 id 都将在 $IDs 中

$IDs = $("#invoiceReceiptTable input:checkbox:checked").map(function () {
    var id = $(this).attr("id");
    return id;
}).get();
于 2014-02-14T06:32:57.070 回答