使用js实现checkbox的全选与反选功能
2014-10-23 09:38
756 查看
效果如下图
代码如下
代码如下
<!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 languages = document.getElementsByName("language"); for (var i=0; i < languages.length; i++) { var language = languages[i]; language.checked = true; } } /** * 取消全选 */ function deselectAll() { var languages = document.getElementsByName("language"); for (var i=0; i < languages.length; i++) { var language = languages[i]; language.checked = false; } } /** * 反选 */ function inverse() { var languages = document.getElementsByName("language"); for (var i=0; i < languages.length; i++) { var language = languages[i]; if(language.checked) { language.checked = false; }else { language.checked = true; } } } </script> </head> <body> 编程语言:<input type="checkbox" name="language" value="C" />C <input type="checkbox" name="language" value="C++" />C++ <input type="checkbox" name="language" value="Java" />Java <input type="checkbox" name="language" value="Python" />Python<br/> <button onclick="selectAll();">全选</button> <button onclick="deselectAll();">取消全选</button> <button onclick="inverse();">反选</button> </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复选框全选全不选功能