我有一个表格,我希望能够在标题中选中一个复选框来选择该表格中的所有复选框。这应该是一个非常简单的事情,但它根本就不在这里工作。当我在JSfiddle上运行示例代码时,它可以工作。在我的开发环境中运行它并检查顶部框时,如果我发出alert()它会发出警报,但仍然不会检查其余的复选框。有什么想法吗?
[JS fiddle][1]
http://jsfiddle.net/pkvLqe1d/
以下是我的开发环境中的代码:
<div class="content" id="content">
<form id="selectContent" method="post" class="grow">
<table class="static" style="width:1000px;">
<thead>
<tr>
<th>
<b>Id</b>
</th>
<th>
<b>Name</b>
</th>
<th>
<label><input type="checkbox" name="select-all" id="select-all" /></label>
</th>
</tr>
</thead>
<tbody>
<?php
foreach($a as $b)
{
echo "<tr>";
echo "<td>$b->id</td>";
echo "<td>$b->name</td>";
echo "<td><label><input type='checkbox' name='id[]' value='".trim($b->id)."' class='round'></label></td>";
echo "</tr>";
}
?>
</tbody>
</table>
</form>
</div>
<script>
//Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
});
</script>
答案 0 :(得分:0)
由于我使用ezmark复选框,解决方案是在脚本末尾添加.change(),如下所示。这将只是将检索到的复选框的已检查状态设置为与我们最近修改的“主”复选框的状态相同:
$('#select-all').click(function() {
$(':checkbox').prop('checked',this.checked).change();
});