JavaScript实现复选框全选与全不选的效果

简介: 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;
  width: 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="全选" οnclick="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>


相关文章
|
7月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
208 1
|
JavaScript 前端开发
Javascript知识【jQuery属性操作&案例:重写复选框操作】
Javascript知识【jQuery属性操作&案例:重写复选框操作】
|
2月前
|
JavaScript 前端开发
Javascript:获取、设置复选框的勾选状态
Javascript:获取、设置复选框的勾选状态
53 1
|
6月前
|
JavaScript 程序员
老程序员分享:js实现复选框的全选、全部选和反选
老程序员分享:js实现复选框的全选、全部选和反选
43 0
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
551 0
|
7月前
|
JavaScript
JS切换页码后复选框选中状态还在
JS切换页码后复选框选中状态还在
js动态添加复选框&动态勾选对应的值
我的js对应的代码(下面代码实现了js拼接input标签和lable标签实现的显示效果)
|
JavaScript
原生js实现复选框选全部框与取消全选框
原生js实现复选框选全部框与取消全选框
76 0
|
JavaScript 前端开发
JavaScript实现复选框全选与全不选的效果
JavaScript实现复选框全选与全不选的效果
|
JavaScript SQL 前端开发
FineReport 复选框实现多个值查询(使用JS通过文本控件作为值传递实现)
FineReport 复选框实现多个值查询(使用JS通过文本控件作为值传递实现) 给复选框添加编辑后事件,事件使用Javascript,具体的js如下
739 0