主要功能:
1、选择行标题的复选框(checkbox)会对列表页面的其他复选框进行相应的全选中和全不选中
2、选择表格中的复选框,根据表格中的复选框是否全部被选中,确定标题行的复选框是否是选中状态
功能实现代码如下:
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>Insert title here</title> <script type="text/javascript"> //全选/全不选 function funCheckAll(obj){ var items = document.getElementsByTagName("input"); for(var i=0;i<items.length;i++){ if(items[i].type=="checkbox"&& items[i].name=="checkSel") items[i].checked = obj.checked; } } //普通复选框脚本 function funCheck(){ var flg = true; var items = document.getElementsByTagName("input"); for(var i=0;i<items.length;i++){ if(items[i].type=="checkbox"&& items[i].name=="checkSel"){ if(!items[i].checked){ flg = false; break; } } } document.getElementById("cbSelectAll").checked= flg; } </script> </head> <body> <table border="1"> <tr> <th><input type="checkbox" id='cbSelectAll' οnclick="funCheckAll(this);"></th> <th>标题</th> </tr> <tr> <td> <input type="checkbox" name='checkSel' οnclick="funCheck()"> </td> <td>1</td> </tr> <tr> <td> <input type="checkbox" name='checkSel' οnclick="funCheck()"> </td> <td>2</td> </tr> <tr> <td> <input type="checkbox" name='checkSel' οnclick="funCheck()"> </td> <td>3</td> </tr> </table> </body> </html>