我的表如下所示:
<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。