<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>
</head>
<body><table border="0" cellspacing="0" cellpadding="0" class="bg">
<form action="" method="post">
<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="checkAll(this.checked)" />全选</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>
</form>
</table>
<script type="text/JavaScript">
//全选和全不选效果
function checkAll(boolValue){
var arr = document.getElementsByName("product");
for(var i=0;i<arr.length;i++){
arr[i].checked = boolValue;
}
}
</script>
</body>
</html>
效果图：
个人E-mail：chaoyi77@163.com
相关推荐
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选， 附源码。 修复不能多选问题，代码仅供参考
复选框的应用（全选、反选、全不选效果）
日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery...
本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考，具体如下： 先来看看JavaScript实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端技巧吧，很多时候我们都...
asp.net中树的全选 ，全不选 效果，勾选复选框
主要介绍了vue多级复杂列表展开/折叠及全选/分组全选实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
复选框全选、全不选和反选的效果实现
程序员在开发的时候，经常会遇到对查询列表中的记录进行批量操作的情况，实现倒是也不难，用javascript就行，但每次都要重新再写一遍，本人在工作中把它总结为一个模块，记录下来，以便再用。
Datagridview控件没有全选或取消全选的复选框，本资源用VB2015通过扩展DataGridViewColumnHeaderCell类，在列头绘制一个复选框checkbox控件，通过定义checkbox鼠标单击事件来实现行的全选或取消全选。checkbox还可以...
ASP.NET Gridview checkbox全选与全不选实现代码，其实原理就是利用js来实现的，但需要简单的设置下回传。
简单js实现全选全部选反选效果
input type="checkbox" id="Check" value="全选/全不选"/>全选/全不选 <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 ...
教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果
使用Jquery编写的全选全不选反选功能，代码简洁，通俗易懂。。。
图片列表：鼠标移入/移出改变图片透明度 简易选项卡 简易JS年历 单一按钮显示/隐藏一播放列表收缩展开 提示框效果 鼠标移过，修改图片路径 复选框（checkbox）全选/全不选/返选 用typeof查看数据类型等很多
主要介绍了vue.js实现的全选与全不选功能,结合实例形式分析了vue.js基于elementui实现全选与全不选功能的相关页面渲染、初始化数据及功能函数等相关操作技巧,需要的朋友可以参考下
本文实例为大家分享了JavaScript实现表单全选或反选的具体代码，供大家参考，具体内容如下 表单中常常会用到checkbox复选框，通过复选框做出的列表全选或全不选的效果也是很常见的，比如购物车的商品列表，所以本...
js 实现 复选框全选（二）! 值得下载看看!资源免费,大家分享!!