JS:"全选"功能实现(checkbox)

时间：2022-03-19 03:14:22
9、全选功能：【checkbox的选中与否是checked==false和checked==true】<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN"><html><head><title>全选功能</title><scripttype="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><thwidth=15%><input type="checkbox"id="checkAll"onclick="check()">全选</th><thwidth=50%>产品名称</th><thwidth=25%>价格（元）</th><thwidth=10%>数量</th></tr><trstyle="text-align:center"><td><inputtype="checkbox" name="products" id="ck1"onclick="checkPer(this.id)"/></td><td>诺基亚N85手机</td><td>2589</td><td>6</td></tr><trstyle="text-align:center"><td><inputtype="checkbox" name="products" id="ck2"onclick="checkPer(this.id)"/></td><td>佳能IXUS95ISY数码相机</td><td>1865</td><td>5</td></tr><trstyle="text-align:center"><td><inputtype="checkbox" name="products" id="ck3"onclick="checkPer(this.id)"/></td><td>戴尔新版SK8115键盘</td><td>60</td><td>56</td></tr><trstyle="text-align:center"><td><inputtype="checkbox" name="products" id="ck4"onclick="checkPer(this.id)"/></td><td>联想折叠式笔记本电脑桌</td><td>59</td><td>10</td></tr><trstyle="text-align:center"><td><inputtype="checkbox" name="products" id="ck5"onclick="checkPer(this.id)"/></td><td>康佳32英寸液晶电视</td><td>2945</td><td>3</td><trstyle="text-align:center"><td><inputtype="checkbox" name="products" id="ck6"onclick="checkPer(this.id)"/></td><td>九阳JYDX-78D五谷系列豆浆机</td><td>299</td><td>8</td></tr><tr><tdcolspan="4"><b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp删除选中的产品</b></td></tr></table>
</body></html>
标签：

相关文章