使用js实现checkbox的全选与反选功能二
2014-10-23 09:45
791 查看
效果图如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script type="text/javascript"> /** * 全选 */ function selectAll() { var all = document.getElementById("all"); var languages = document.getElementsByName("language"); for (var i=0; i < languages.length; i++) { languages[i].checked = all.checked; } } /** * 当下面所有的选项都被选中时,全选被选中 * 当下面所有的选项有一个没有被选中时,全选不被选中 */ function sel() { var all = document.getElementById("all"); var languages = document.getElementsByName("language"); var count = 0; for (var i=0; i < languages.length; i++) { if(languages[i].checked) { count++; } } if(count == languages.length) { all.checked = true; }else { all.checked = false; } } </script> </head> <body> <input type="checkbox" id="all" onclick="selectAll()" />全选<br/> 编程语言:<br/> <input type="checkbox" name="language" value="C" onclick="sel()" />C<br/> <input type="checkbox" name="language" value="C++" onclick="sel()" />C++<br/> <input type="checkbox" name="language" value="Java" onclick="sel()" />Java<br/> <input type="checkbox" name="language" value="Python" onclick="sel()" />Python<br/> </body> </html>
相关文章推荐
- 使用js实现checkbox的全选与反选功能
- 使用vue.js实现checkbox的全选和多个的删除功能
- 使用vue.js实现checkbox的全选和多个的删除功能
- 使用js实现全选、反选功能
- Js 实现一组checkBox全选、不选、反选功能
- Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行
- 关于用jQuery实现的checkbox全选和反选功能
- js实现全选和反选功能
- 使用masterpage的情况下如何使用js实现repeater控件里的checkbox全选
- JS实现CheckBox复选框全选全不选功能
- checkbox实现的类似邮箱的全选和反选功能
- JS在GridView中实现CheckBox全选和非全选 及Gridview批量删除使用技巧
- Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)
- js初学—实现checkbox全选功能
- 使用jquery实现全选,全不选,反选功能
- js实现全选、反选功能(批量删除)
- JS实现checkbox全选功能
- ASP.NET CheckBoxList 控件实现全选、反选、清除功能 利用js
- Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行
- JS实现CheckBox复选框全选全不选功能