<th class="column-title" style='width:55px'>
<input type="checkbox" id="all" style='vertical-align:middle'>
<label for="all" style='vertical-align:middle;display:inline-block'>全选</label>
</th>
<td class="column-title">
<input type="checkbox" name="box" value="{{$value->id}}">
</td>
js代码:
$(function () {
//给全选的复选框添加事件
$("#all").click(function () {
// this 全选的复选框
var userids = this.checked;
//获取name=box的复选框 遍历输出复选框
$("input[name=box]").each(function () {
this.checked = userids;
});
});
//给name=box的复选框绑定单击事件
$("input[name=box]").click(function () {
//获取选中复选框长度
var length = $("input[name=box]:checked").length;
//未选中的长度
var len = $("input[name=box]").length;
if (length == len) {
$("#all").get(0).checked = true;
} else {
$("#all").get(0).checked = false;
}
});
});