这篇博客介绍了如何使用JavaScript实现HTML页面中的全选功能。通过获取checkbox元素并监听其状态变化，实现全选或取消全选的功能。同时，当单个商品选项被选择或取消时，会同步更新全选按钮的状态。
9、
全选功能：【checkbox的选中与否是checked==false和checked==true】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>全选功能</title>
<script
type="text/javascript">
function check(){
var ck = document.getElementByIdx_x("checkAll");
var prods = document.getElementsByName("products");
if(ck.checked){
for(var i=0;i<prods.length;i++){
prods[i].checked=true;
}
}else{
for(var i=0;i<prods.length;i++){
prods[i].checked=false;
}
}
}
function checkPer(id){
var curCk = document.getElementByIdx_x(id);
var allCk = document.getElementsByName("products");
var count = 0;
if(curCk.checked){
for(var i=0;i<allCk.length;i++){
if(allCk[i].checked) count++;
}
if(count==allCk.length){
document.getElementByIdx_x("checkAll").checked=true;
}else{
document.getElementByIdx_x("checkAll").checked=false;
}
}
else{
document.getElementByIdx_x("checkAll").checked=false;
}
}
</script>
</head>
<body>
<table border="1" width=70% cellpadding="0"
cellspacing="0">
<tr>
<th
width=15%><input type="checkbox"
id="checkAll"
onclick="check()">全选</th>
<th
width=50%>产品名称</th>
<th
width=25%>价格（元）</th>
<th
width=10%>数量</th>
</tr>
<tr
style="text-align:center">
<td><input
type="checkbox" name="products" id="ck1"
onclick="checkPer(this.id)"
/></td>
<td>诺基亚N85手机</td>
<td>2589</td>
<td>6</td>
</tr>
<tr
style="text-align:center">
<td><input
type="checkbox" name="products" id="ck2"
onclick="checkPer(this.id)"
/></td>
<td>佳能IXUS95ISY数码相机</td>
<td>1865</td>
<td>5</td>
</tr>
<tr
style="text-align:center">
<td><input
type="checkbox" name="products" id="ck3"
onclick="checkPer(this.id)"
/></td>
<td>戴尔新版SK8115键盘</td>
<td>60</td>
<td>56</td>
</tr>
<tr
style="text-align:center">
<td><input
type="checkbox" name="products" id="ck4"
onclick="checkPer(this.id)"
/></td>
<td>联想折叠式笔记本电脑桌</td>
<td>59</td>
<td>10</td>
</tr>
<tr
style="text-align:center">
<td><input
type="checkbox" name="products" id="ck5"
onclick="checkPer(this.id)"
/></td>
<td>康佳32英寸液晶电视</td>
<td>2945</td>
<td>3</td>
<tr
style="text-align:center">
<td><input
type="checkbox" name="products" id="ck6"
onclick="checkPer(this.id)"
/></td>
<td>九阳JYDX-78D五谷系列豆浆机</td>
<td>299</td>
<td>8</td>
</tr>
<tr><td
colspan="4"><b>        删除选中的产品</b></td></tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
