广州PHP]简单实现“全选”“反选”“取消”功能
[PHP]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body><table id="content" align="center" width="70%" rules="all" cellspacing="0" cellpadding="2" border="1"> <tr> <th> </th> <th>ID</th> <th>姓名</th> <th>绰号</th> </tr> <tr> <td><input type="checkbox" name="id[]" value="1"></td> <td>1</td> <td>宋江</td> <td>及时雨</td> </tr> <tr> <td><input type="checkbox" name="id[]" value="2"></td> <td>2</td> <td>卢俊义</td> <td>玉麒麟</td> </tr> <tr> <td><input type="checkbox" name="id[]" value="3"></td> <td>3</td> <td>吴用</td> <td>智多星</td> </tr> <tr> <td><input type="checkbox" name="id[]" value="4"></td> <td>4</td> <td>鲁智深</td> <td>花和尚</td> </tr> <tr> <td><input type="checkbox" name="id[]" value="5"></td> <td>5</td> <td>林冲</td> <td>豹子头</td> </tr></table><table align="center" width="70%" rules="all" cellspacing="0" cellpadding="2" border="1"> <tr> <td> <input type="button" value="全选" id="quanxuan"> <input type="button" value="返选" id="fanxuan"> <input type="button" value="取消" id="quxiao"> </td> </tr></table><script> var checkboxs = document.getElementById('content').getElementsByTagName('input'); document.getElementById('quanxuan').onclick = function () { for(var i=0; i<checkboxs.length; i++){ if(checkboxs[i].checked == false){ checkboxs[i].checked = true; } } } document.getElementById('fanxuan').onclick = function () { for(var i=0; i<checkboxs.length; i++){ if(checkboxs[i].checked == false){ checkboxs[i].checked = true; }else{ checkboxs[i].checked = false; } } } document.getElementById('quxiao').onclick = function () { for(var i=0; i<checkboxs.length; i++){ if(checkboxs[i].checked == true){ checkboxs[i].checked = false; } } }</script></body></html> |
效果：
