首页 > 代码库 > html+css+js实现复选框全选与反选
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 else24 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 else38 cbox.checked=true;39 }40 else41 {42 if(cbox.checked)43 cbox.checked=false;44 else45 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实现复选框全选与反选
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。