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>
    

  • 相关阅读:
    mysql group_concat函数
    easyui textbox获取焦点事件
    jquery获取select下拉框的前一个,后一个,第一个,最后一个option对象
    easyui 只刷新当前页面的数据 datagrid reload 方法
    spring-data-jpa查询语句的书写实例小计
    jquery给input标签添加data-options属性
    正则表达式的常用方法
    正则表达式之 /^(d)$/
    jquery获取下拉列表的值和显示内容的方法
    一个 关于 case when的SQL
  • 原文地址:https://www.cnblogs.com/a1111/p/6540407.html
Copyright © 2011-2022 走看看