JavaScript--点击按钮实现复选框全选和反选功能
2015-08-20 22:34
936 查看
功能实现:
1、点击全选和反选按钮,实现复选框全选和部分选的功能
2、点击全选复选框,实现子复选框全选或全不选功能
完整代码:
1、点击全选和反选按钮,实现复选框全选和部分选的功能
2、点击全选复选框,实现子复选框全选或全不选功能
完整代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> </style> </head> <body> <table border="1"> <tr> <th><input type="checkbox" class="choose-all-input" onclick="clickChooseAllInput()" /></th> <th>学号</th> <th>姓名</th> <th>班级</th> </tr> <tr> <td><input type="checkbox" class="choose-single" /></td> <td>001</td> <td>张三</td> <td>李四</td> </tr> <tr> <td><input type="checkbox" class="choose-single" /></td> <td>002</td> <td>F20</td> <td>F20</td> </tr> </table> <button onclick="clickChooseAllBtn()">全选</button> <button onclick="clickChooseReverse()">反选</button> </body> <script type="text/javascript"> var chooseAllInputEle = document.getElementsByClassName("choose-all-input")[0]; var chooseSingleEles = document.getElementsByClassName("choose-single"); function clickChooseAllInput() { if (chooseAllInputEle.checked) { choose("selected"); } else { choose(""); } } function clickChooseAllBtn() { chooseAllInputEle.checked = "checked"; choose("selected"); } function choose(status) { for (var i = 0; i < chooseSingleEles.length; i++) { chooseSingleEles[i].checked = status; } } function clickChooseReverse() { for (var i = 0; i < chooseSingleEles.length; i++) { if (chooseSingleEles[i].checked) { chooseSingleEles[i].checked = ""; } else { chooseSingleEles[i].checked = "checked"; } } } </script> </html>
相关文章推荐
- JavaScript+CSS实现图片动态轮播dynamic_slider
- JavaScript--简单实现按回车键,光标跳转到后一文本框中和表单提交
- JavaScript 编程
- 【JavaScript】---AJAX
- event
- 【JavaScript】冒泡排序,字符串排序,数字排序
- Javascript书籍推荐----(步步为赢)
- Javascript书籍推荐----(步步为赢)
- javascript超好用Date Format
- JS门面模式
- JSP——>JSTL入门专用
- JavaScript实现类的private、protected、public、static以及继承
- JSTL标准标签库详解
- js中SetInterval与setTimeout用法
- JSP过滤器
- js监听 冒泡机制 dojo事件处理
- 在extjs 的tree中联动修改页面,但是页面不出来,还报ct is null或者...is no function
- Ember.js之动态创建模型
- js制作台球游戏
- 使用JavaScript判断输入的内容是否为空,应该注意的一点!