jQuery实现全选与全不选
一、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//页面加载并派发事件
$(function(){
$("#ch").click(function(){
//转化为JQ对象并调用prop方法获取属性
//alert($(this).prop("checked"));
//获取其他复选框,使用prop方式设置属性与全选框保持一致
$(".ch1").prop("checked",$(this).prop("checked"));
});
});
</script>
</head>
<body ">
<table align="center" border="1" width="300px" height="300px">
<tr >
<th>全选<input id="ch" type="checkbox" > </th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<th><input type="checkbox" class="ch1"></th>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<th><input type="checkbox" class="ch1"></th>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<th><input type="checkbox" class="ch1"></th>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
</table>
</body>
</html>
二、结果展示
备注:由于个人原因,本博客暂停更新。如有问题可联系本人,本人提供技术指导、学习方向、学习路线。本人微信wlp1156107728(添加注明来意) QQ1156107728(添加注明来意)