<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
相关推荐
axure复选框全选反选效果.rp
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选 本网站需要12积分下在的，现在共享都给大家
2. 在列表下方放置一个“全选/全不选”复选框，当选中“全选/全不选”复选框后，列表中的所有复选框都选中，当取消“全选/全不选”复选框后，列表中的所有复选框都取消选中。 3. 当列表中的复选框都取消选中后，...
复选框的应用（全选、反选、全不选效果）
本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考，具体如下： 先来看看JavaScript实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端技巧吧，很多时候我们都...
在学习和实现Vue多级复杂列表的展开/折叠及全选/分组全选功能时，我们需要关注一些关键技术和实现方法。首先，我们要了解如何构建数据结构，这是展示列表的基础。然后，我们需要掌握如何通过数据驱动的方式初始化...
函数首先获取触发事件的复选框的name属性，然后遍历所有与之匹配的复选框，通过设置`checked`属性来实现全选或全不选的效果。这里采用了兼容性更好的通用写法，即使用`each`循环遍历并直接操作`checked`属性，而不是...
在网页开发中，常常会遇到需要实现复选框（checkbox）的全选、全不选以及单个选择的功能。这里我们主要探讨如何使用原生JavaScript和jQuery来实现这一功能，同时考虑到行内点击选择的效果。本文将详细介绍两种实现...
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
### ASP.NET中实现树结构全选与全不选功能详解 在ASP.NET开发过程中，处理树形结构数据是非常常见的需求之一。特别是在管理后台系统中，树形结构常用于表示层级关系，例如产品分类、组织架构等。对于这些场景，提供...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
在`deselectAll`函数中，我们将每个复选框的`checked`属性设置为`false`，实现了反选的效果。 三、事件绑定 为了让这些功能在用户操作时生效，我们需要将上述函数绑定到特定的事件，例如点击事件。例如，我们可以将...
通过这些JavaScript和HTML代码的组合，你可以实现一个基本的全选/全不选效果。这个效果不仅可以应用于表格，还可以扩展到任何包含可选项目的列表或其他HTML结构。在实际项目中，可能还需要考虑更多细节，如优化性能...
反之，如果数量不相等，则“全选”按钮应取消选中。 根据提供的文件名"demo"，这可能是一个包含这个功能的演示代码文件。通常，这样的文件会包含HTML、CSS和JavaScript代码，用于构建一个可运行的示例。实际的代码...
在上面的代码中，我们有一个ID为`selectAll`的全选复选框和一个ID为`uncheckAll`的全不选按钮。复选框的name属性设为`option`，这样它们将被视为一组。 接下来，我们需要用jQuery来监听这两个按钮的点击事件，并...
### 全选、全不选功能代码解析 在前端开发中，实现用户界面与用户交互是十分重要的一个环节。特别是对于包含多个复选框（checkbox）的表单来说，提供“全选”、“全不选”及“部分选择”的功能可以极大地提升用户...
本示例着重介绍如何实现一个功能丰富的ListView，支持单选、多选、全选、全不选以及自定义选择模式。以下是对这些功能的详细解释： 1. **单选模式**：在单选模式下，ListView中的每一项只能有一个被选中。通常情况...