JavaScript checkbox全选和全不选效果
分类:实例代码
分享一段极为简单的代码实例,利用JavaScript实现checkbox复选框全选和全不选效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript"> function checkAll(ospan,cka) { var items = document.getElementsByTagName("input"); if (ospan.innerHTML == "全选") { ospan.innerHTML = "取消" } else { ospan.innerHTML = "全选" } for (var index = 0; index < items.length; index++) { items[index].checked = cka.checked; } } window.onload = function () { var ospan = document.getElementsByTagName("span")[0]; var cka = document.getElementById("all"); cka.onclick = function () { checkAll(ospan,cka); } } </script> </head> <body> <input type="checkbox" id="all"><span>全选</span><br/> <input type="checkbox" name="item">数学<br/> <input type="checkbox" name="item">英语<br/> <input type="checkbox" name="item">物理<br/> </body> </html>
JavaScript checkbox全选和全不选效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript checkbox全选和全不选效果就介绍到这了。
JavaScript checkbox全选和全不选效果属于前端实例代码,有关更多实例代码大家可以查看。