案例一:购物车案例模块-全选( prop() 知识点 )
分析
① 全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走。
② 因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。
③ 把全选按钮状态赋值给3小复选框就可以了。
④ 当我们每次点击小的复选框按钮,就来判断:
⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。
⑥ :checked 选择器 :checked 查找被选中的表单元素。
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
text-align: center;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<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() {
// 分析:
// 1.点击全选来控制下面四个input的选中状态(checked属性 ==> prop()方法)
// 和全选的选中状态一致
// 找对象
var $all = $('#j_cbAll');
var $inps = $('#j_tb input');
$all.click(function() {
// 1.先获取全选选中状态
var res = $(this).prop('checked');
// 1.2控制下面四个input
$inps.prop('checked', res);
})
// 2.点击下面input反过来控制上面的全选的选中状态
// 如果四个选中则全选选中
// 否则,只要有一个没有被选中,全选就不用选中
$inps.click(function() {
var len = $('#j_tb input:checked').length;
// 是四个input里面选中的 ==> :checked
// 要想知道多少个input选中,通过length属性获取结果
if(len === 4) {
//四个选中则全选选中
$all.prop('checked', true);
} else {
// 至少有一个没有被选中,全选就不用选中
$all.prop('checked', false);
}
})
})
</script>
</body>
代码优化
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
text-align: center;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">