zoukankan      html  css  js  c++  java
  • JavaScript实现复选框全选与全不选的效果

         //里面涉及到几张图片,有需要的可以联系我要,直接私信我就行,每天在这个点都会上线,看到就回,或者从我的资料里面找我的联系方式,收到之后会发给你们的
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>全选效果</title>
    <style type="text/css">
    .bg{
    	background-image: url(images/list_bg.gif);
    	background-repeat: no-repeat;
    	 730px;
    }
    td{text-align:center;
    font-size:13px;
    line-height:25px;
    }
    body{margin:0}
    </style>
     <script type="text/JavaScript">
     function check(){
     	var oInput=document.getElementsByName("product");
     	for (var i=0;i<oInput.length;i++)
     		oInput[i].checked=document.getElementById("all").checked;
     }
    </script>
    </head>
    
    <body><table border="0" cellspacing="0" cellpadding="0" class="bg">
      <tr>
        <td style="height:40px;"> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr style="font-weight:bold;">
        <td><input id="all" type="checkbox" value="全选" onclick="check();" />全选</td>
        <td>商品图片</td>
        <td>商品名称/出售者/联系方式</td>
        <td>价格</td>
      </tr>
      <tr>
    	<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
        </tr>
      
      <tr>
        <td><input name="product" type="checkbox" value="1" /></td>
        <td><img src="images/list0.jpg" alt="alt" /></td>
        <td>杜比环绕,家庭影院必备,超真实享受<br />
        出售者:ling112233<br />
        <img src="images/online_pic.gif" alt="alt" />   
    	<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
        <td>一口价<br />
        2833.0 </td>
      </tr>
      <tr>
    	<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
        </tr>
      <tr>
        <td><input name="product" type="checkbox" value="2" /></td>
        <td><img src="images/list1.jpg" alt="alt" /></td>
        <td>NVDIA 9999GT 512MB 256bit极品显卡,不容错过<br />
          出售者:aipiaopiao110 <br />
        <img src="images/online_pic.gif" alt="alt" />   
    	<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
        <td>一口价<br />
        6464.0 </td>
      </tr>
      <tr>
    	<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
        </tr>
      <tr>
        <td><input name="product" type="checkbox" value="3" /></td>
        <td><img src="images/list2.jpg" alt="alt" /></td>
        <td>精品热卖:高清晰,30寸等离子电视<br />
          出售者:阳光的挣扎 <br />
        <img src="images/online_pic.gif" alt="alt" />   
    	<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
        <td>一口价<br />
        18888.0 </td>
      </tr>
      <tr>
    	<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
        </tr>
       <tr>
        <td><input name="product" type="checkbox" value="4" /></td>
        <td><img src="images/list3.jpg" alt="alt" /></td>
        <td>Sony索尼家用最新款笔记本 <br />
          出售者:疯狂的镜无<br />
        <img src="images/online_pic.gif" alt="alt" />   
    	<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
        <td>一口价<br />
         5889.0 </td>
      </tr>
      <tr>
    	<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
        </tr>
    </table>
    
    </body>
    </html>
    

  • 相关阅读:
    GhostBSD 3.0RC3,基于GNOME的FreeBSD
    Nagios 3.4.3 发布,企业级监控系统
    Jolokia 1.0.6 发布, JMX远程访问方法
    微软希望开发人员不要使 WebKit 成为新版 IE6
    Kwort Linux 3.5 正式版发布
    EJDB 1.0.24 发布,嵌入式 JSON 数据库引擎
    Pale Moon 15.3 Firefox“苍月”优化版发布
    Galera Load Balancer 0.8.1 发布
    SmartSVN V7.5 正式发布
    PostgresQL建立索引如何避免写数据锁定
  • 原文地址:https://www.cnblogs.com/a1111/p/6540407.html
Copyright © 2011-2022 走看看