Javascript全选/取消全选操作-子非愚，焉知愚之乐？

js代码：

function checkAll() {
    for(var a = document.getElementById("checkAll"), b = document.getElementsByName("checkOne"), c = 0; c < b.length; c++) 
    b[c].checked = 1 == a.checked ? !0 : !1
}

Demo:

</p>
<style type="text/css">table td:first-child{width:10%}
table td:nth-child(2){width:15%}
table td:nth-child(3){width:35%}
table tr:nth-child(odd){background:#ddebf7}
table tr:nth-child(even){background:#bdd7ee}
table td:nth-child(2){font-weight:700}
table tr:hover{background:#73B1E0;color:#FFF}
table{border:1px solid #9bc2e6;border-collapse:collapse;color:#333;width:500px;height:50px;margin:12% auto;text-align:center}
table tr td{border:1px solid #9bc2e6;border-left:none;border-bottom:none;font-size:14px;padding:3px 0}
table th{padding:5px 0;background:#448dce;color:#fff}</style>
<p><script type="text/javascript">function createTable(){for(var e,n,t=document.createElement("tbody"),c=["向妍伊|杨寻冬|简付元|家盼晴|宓新锁|韶彤|贺才人|钮缌羽|仇涛华|成涛|邵心平|纪振|罗月","男|女|男|女|男|女|男|女|男|男|男|男|男","29|25|35|34|23|33|42|25|30|25|30|36|26"],l=c[0].split("|"),r=c[1].split("|"),c=c[2].split("|"),i=0;i<l.length;i++){e=t.insertRow(t.rows.length);for(var o=0;5>o;o++)n=e.insertCell(e.cells.length),0==o?n.innerHTML='<input type="checkbox" name="checkOne">':1==o?n.innerHTML=i+1:2==o?n.innerHTML=l[i]:3==o?n.innerHTML=r[i]:4==o&&(n.innerHTML=c[i])}document.querySelector("#tb").appendChild(t)}function checkAll(){for(var e=document.getElementById("checkAll"),n=document.getElementsByName("checkOne"),t=0;t<n.length;t++)n[t].checked=1==e.checked?!0:!1}</script><br />
<body data-rsssl=1 onload="createTable()"></p>
<table id="tb">
<thead>
<tr>
<th><input type="checkbox" onclick="checkAll()" id="checkAll"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
</table>
<p></body><br />

清空运行

Javascript全选/取消全选操作

相关推荐

评论抢沙发

评论前必须登录！

热门文章

热门标签

网站统计

去评论

回顶部