全选与全取消在工作过程中经常会使用到,是因为它很方便,同时可以提高用户体验值,本文介绍如何使用javascript实现全选与全取消功能,需要了解的朋友可以参考下
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" language="javascript"> function selectAll() { var allCheckBoxs = document.getElementsByName("coffee"); var desc = document.getElementById("like"); if(desc.value == "都喜欢") { desc.value = "都不喜欢"; for(var i = 0; i < allCheckBoxs.length; i ++ ) { allCheckBoxs[i].checked = true; } } else { desc.value = "都喜欢"; for(var i = 0; i < allCheckBoxs.length; i ++ ) { allCheckBoxs[i].checked = false; } } } </script> </head> <body> <p>你喜欢那种类型咖啡</p> <form> <input type="checkbox" name="coffee" value="cream">蓝山咖啡<br> <input type="checkbox" name="coffee" value="sugar" >摩卡<br> <input type="checkbox" name="coffee" value="sugar">拿铁<br> <input type="checkbox" name="coffee" value="sugar">卡布奇诺<br> <input type="checkbox" name="coffee" value="sugar">爱尔兰咖啡<br> <input type="button" id="like" value="都喜欢" onClick="selectAll()"> </form> </body> </html>