运用JQuery实现全选,反选和取消的操作
代码展示:
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<script src="jquery-3.2.1.js"></script>
<script>
$(function(){
$("#selectAll").click(function(){
$(":checkbox").prop("checked",true);
});
$("#notSelect").click(function(){
$(":checkbox").prop("checked",false);
});
});
</script>
</head>
<body>
<input type="button" id="selectAll" value="全选">
<input type="button" id="notSelect" value="取消">
<table border="1">
<tr align="center">
<td>#</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>
</table>
</body>
</html>
?运行效果:
?
|