jq 表格全选案例

<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧狮子头</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>日式肥牛</td>
<td>田老师</td>
</tr>

</tbody>
</table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#j_cbAll").click(function () {
$("#j_tb input").prop("checked",$(this).prop("checked"));
});
$("#j_tb input").click(function () {
if($("#j_tb input:checked").length==$("#j_tb input").length){
$("#j_cbAll").prop("checked",true);
}else {
$("#j_cbAll").prop("checked",false);
}
});
});
</script>
posted @ 2018-12-10 22:05  lujieting0  阅读(383)  评论(0编辑  收藏  举报