html+css+js实现复选框全选与反选
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+css+js实现复选框全选与反选相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 6 <meta name="keywords" content="js,笔试题目" /> 7 <style type="text/css"> 8 table,tr,td 9 { 10 border:1px solid red; 11 } 12 </style> 13 <script type="text/javascript"> 14 function quanxuan() 15 { 16 for(var i=1;i<=3;i++) 17 { 18 var cbox_id="cb"+i; 19 var cbox=document.getElementById(cbox_id); 20 //alert(cbox.value); 21 if(document.getElementById("cb_quanxuan").checked) 22 cbox.checked=true; 23 else 24 cbox.checked=false;; 25 } 26 } 27 function fanxuan() 28 { 29 for(var i=1;i<=3;i++) 30 { 31 var cbox_id="cb"+i; 32 var cbox=document.getElementById(cbox_id); 33 if(document.getElementById("cb_fanxuan").checked) 34 {//选中反选框 35 if(cbox.checked) 36 cbox.checked=false; 37 else 38 cbox.checked=true; 39 } 40 else 41 { 42 if(cbox.checked) 43 cbox.checked=false; 44 else 45 cbox.checked=true; 46 } 47 } 48 } 49 </script> 50 51 </head> 52 <body> 53 <form id="form1"> 54 <table> 55 <tr> 56 <td><input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />全选</td> 57 <td>复选框全选案例</td> 58 <td> </td> 59 <td> </td> 60 </tr> 61 62 <tr> 63 <td><input type="checkbox" id="cb1" value="1" />1</td> 64 <td>我是傻逼1</td> 65 <td> </td> 66 <td> </td> 67 </tr> 68 69 <tr> 70 <td><input type="checkbox" id="cb2" value="2" />2</td> 71 <td>我是傻逼2</td> 72 <td> </td> 73 <td> </td> 74 </tr> 75 76 <tr> 77 <td><input type="checkbox" id="cb3" value="3" />3</td> 78 <td>我是傻逼3</td> 79 <td> </td> 80 <td> </td> 81 </tr> 82 83 <tr> 84 <td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td> 85 <td>反选案例</td> 86 <td> </td> 87 <td> </td> 88 </tr> 89 </table> 90 </form> 91 </body> 92 </html>
以上是关于html+css+js实现复选框全选与反选的主要内容，如果未能解决你的问题，请参考以下文章