zoukankan html css js c++ java
js 按钮实现复选框全选与反选

View Code
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>关键字查询设置</title>
  6 <style>
  7     .right {
  8         text-align:right;
  9     }
 10 </style>
 11 
 12 </head>
 13 
 14 <body>
 15     <form method="POST">
 16         <table width="100%">
 17          <tr>您正在做的业务是：产品设计--客户化设置--其他设置--关键字查询设置</tr>
 18         </table>
 19         
 20         <table width="100%">
 21             <tr>
 22                 <div class="right">
 23                     <input type="button" value="提交" onClick=location="key_register_ok_b.html">
 24                     <input type="button" value="返回" onClick=location="key.html">
 25                 </div>
 26             </tr>
 27         </table>
 28         
 29         <script language="javascript">
 30 
 31         var selectAll='全选';
 32         var cancelAll='取消';
 33 
 34         function selAll(obj){
 35             var col=obj.elements["check"];
 36             for(var i=0;i<obj.elements.length;i++){
 37                 if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
 38                     if(col.value==selectAll){
 39                         obj.elements[i].checked=true;
 40                     }else{
 41                         obj.elements[i].checked=false;
 42                     }
 43                 }
 44             }
 45             col.value=(col.value==cancelAll?selectAll:cancelAll);
 46         }
 47         </script>
 48         
 49         <table width="100%">
 50             <tr>
 51                 <td bgcolor=#96E1A0 bordercolorlight=#848284 bordercolordark=#eeeeee width="25%" colspan=4>请选择用于关键字查询的字段&nbsp;&nbsp;<INPUT onclick=selAll(this.form) type="button" onmouseover=this.className='btn3_mouseover' onmouseout=this.className='btn3_mouseout' onmousedown=this.className='btn3_mousedown' onmouseup=this.className='btn3_mouseup' class="BUTTON_STYLE1" value="全选" name="check">&nbsp;</td> 
 52             </tr>
 53 
 54             <tr>
 55                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="FIRST_KIND_ID" checked>I级分类编号&nbsp;</td>
 56                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="FIRST_KIND_NAME" checked>I级分类名称&nbsp;</td>
 57                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="SECOND_KIND_ID" checked>II级分类编号&nbsp;</td> 
 58                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="SECOND_KIND_NAME" checked>II级分类名称&nbsp;</td>
 59             </tr>
 60 
 61             <tr>
 62                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="THIRD_KIND_ID" checked>III级分类编号&nbsp;</td>
 63                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="THIRD_KIND_NAME" checked>III级分类名称&nbsp;</td>
 64                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="PRODUCT_ID" checked>产品编号&nbsp;</td> 
 65                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="PRODUCT_NAME" checked>产品名称&nbsp;</td>
 66             </tr>
 67 
 68             <tr>
 69                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="PRODUCT_NICK" checked>产品简称&nbsp;</td>
 70                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="PRODUCT_CLASS" checked>优质级别&nbsp;</td>
 71                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="TYPE" checked>用途类型&nbsp;</td> 
 72                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="AMOUNT_UNIT" checked>单位&nbsp;</td>
 73             </tr>
 74 
 75             <tr>
 76                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="PRODUCT_DESCRIBE" checked>产品特性描述&nbsp;</td>
 77                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="FACTORY_NAME" checked>制造商&nbsp;</td>
 78                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="PROVIDER_GROUP" checked>供应商集合&nbsp;</td> 
 79                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="WARRANTY" checked>保修期&nbsp;</td>
 80             </tr>
 81 
 82             <tr>
 83                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="LIST_PRICE" checked>市场单价&nbsp;</td>
 84                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="COST_PRICE" checked>计划成本单价&nbsp;</td>
 85                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="LIFECYCLE" checked>生命周期&nbsp;</td> 
 86                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="PERSONAL_UNIT" checked>计量单位&nbsp;</td>
 87             </tr>
 88 
 89             <tr>
 90                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="PERSONAL_VALUE" checked>计量值&nbsp;</td>
 91                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="TWIN_NAME" checked>替代品&nbsp;</td>
 92                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="TWIN_ID" checked>替代品编号&nbsp;</td> 
 93                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="REMARK" checked>备注&nbsp;</td>
 94             </tr>
 95 
 96             <tr>
 97                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="FILE_CHANGE_AMOUNT" checked>档案变更累计&nbsp;</td>
 98                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="RESPONSIBLE_PERSON_NAME" checked>产品经理&nbsp;</td>
 99                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="RESPONSIBLE_PERSON_ID" checked>产品经理编号&nbsp;</td> 
100                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="REGISTER" checked>登记人&nbsp;</td>
101             </tr>
102 
103             <tr>
104                 <td valign=top bgcolor=#D4F8D4 bordercolor=#DEDBD6 width="25%"><input type="checkbox" name="col" value="REGISTER_ID" checked>登记人编号&nbsp;</td>
105             </tr>
106         </table>
107     </form>
108 </body>
109 </html>
查看全文
相关阅读:
【校招面试之 C/C++】第1题为什么优先使用构造函数的初始化列表
 Linux平台ORACLE INSTANT客户端安装
 ORACLE数据库链接
 ORACLE用户管理
 【转】软件开发工具介绍之 6.Web开发工具
 【转】三大UML建模工具Visio、Rational Rose、PowerDesign的区别
 ORACLE数据库查看执行计划
 数据分析方法
 ORACLE对象大小写问题
 计算机改名引发的ORA
原文地址：https://www.cnblogs.com/fanszone/p/2997116.html