这个全选反选案例相信大家并不陌生了吧,在我们结算购物车时,点击全选按钮就会选择到所有商品,再点击取消其中之一商品,全选按钮就会自动取消。如果购物车中已经选择的物品个数等于所有物品个数,则全选按钮自动select。 下面我们来实施这个小案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 400px;
margin: auto 100px 0 ;
}
table{
border-collapse: collapse;
}
th{
border: 1px black solid;
background-color: aqua;
}
tr>td{
border: 1px black solid;
}
</style>
<body>
<div>
<table>
<thead>
<tr>
<th>
<input type="checkbox" name="" id="all">
</th>
<th>
名称
</th>
<th>
类别
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>
jquery
</td>
<td>
前端移动与开发
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>
jquery
</td>
<td>
前端移动与开发
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>
jquery
</td>
<td>
前端移动与开发
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>
jquery
</td>
<td>
前端移动与开发
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>
jquery
</td>
<td>
前端移动与开发
</td>
</tr>
</tbody>
</table>
</div>
<script src="./jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#all").click(function(){
$("tbody input").prop("checked",$(this).prop("checked"))
})
$("tbody input").click(function(){
if($("tbody input").length === $("tbody input:checked").length){
$("#all").prop("checked",true)
}
else{
$("#all").prop("checked",false)
}
})
})
</script>
</body>
</html>
我创建了一个表格,在表格table中每一行第一个都是一个checkbox可以供我们select,来模拟淘宝选择购物车中物品的情景。thead表头,表头第一行tr又分为三块th。 表中时tbody里面有几行tr,分为三块td。来构建这个表。
在构建时我用到了去除块间距的方法:collapse。
欢迎一起讨论!