• 全部
  • 问答

急急急---怎么实现全选效果后点击任意一个复选框取消全选

dawuijun100 2014-05-17 12:54:38
这是代码-----可以直接复制使用：
<!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>
<script type="text/javascript">
function check(){
var oInput=document.getElementsByName("product");
for(var i=0;i<oInput.length;i++){
if(document.getElementById("all").checked==true){
oInput[i].checked=true;
}else{
oInput[i].checked=false;
}
}
}



</script>
<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="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" onclick="quxiao()"/></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" onclick="quxiao()" /></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" onclick="quxiao()" /></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" onclick="quxiao()" /></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>

</body>
</html>
现在可以实现的功能是全选与取消全选，我需要在全选后，单击下面任意一个复选框后，取消了全选效果，这是我想要的效果图：开始图---这是单击全选后：
需要的效果 是点击下面任意复选框后，上面的全选会取消
这是我手动取消的 -----要实现这效果效果图。比如：


...全文
301 点赞 收藏 2
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年，不再开放新的回复
发表回复
lzj0327 2014-05-17
$('.ch').click(function() { if($('#chAll').is(':checked') && $('.ch').not($(this)).filter(':not(:checked)').size()==0){ $('#chAll').attr('checked', false); } if($('.ch').filter(':not(:checked)').size()==0){ $('#chAll').attr('checked', true); } }); 第一个checkbox赋给id为出chAll，其余的给出chass为ch
 回复 赞
scscms太阳光 2014-05-17
<!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>
</head>

<body>
<form action="" method="post">
    <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="全选" />全选</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>
</form>
<script type="text/javascript">
    /*
    * 点全选，全部选择或者全部取消
    * 点其余任意一个自动判断全选是否需要选上[重点]
    * js必须写在下面，否则需要onload函数
    * */
    var all = document.getElementById("all");
    var product = document.getElementsByName("product"),l = product.length;
    all.onclick = function(){
      for(var i=l;i--;){
          product[i].checked = all.checked;
      }
    };
    for(var i=l;i--;){
        product[i].onclick = function(){
            var k = 0;
            for(var i=l;i--;)product[i].checked && k++;
            all.checked = l==k;
        };
    }
</script>
</body>
</html>
 回复 赞
相关推荐
layui复选框的全选与取消实现方法 今天小编就为大家分享一篇layui复选框的全选与取消实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+vant-UI框架实现购物车的复选框全选和反选功能 主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果 主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
react实现复选框全选和反选组件效果 主要为大家详细介绍了react实现复选框全选和反选组件效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js checkbox全选 反选 取消全部设置表单html复选框勾选 js checkbox全选 反选 取消全部设置表单html复选框勾选
WPF实现带全选复选框的列表控件 本文将说明如何创建一个带全选复选框的列表控件。其效果如下图： 这个控件是由一个复选框（CheckBox）与一个 ListView 组合而成。它的操作逻辑： 当选中“全选”时，列表中所有的项目都会被选中；反之，取消选中...
el-select 下拉框多选实现全选的实现 主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
利用Bootstrap实现表格复选框checkbox全选 首先来看看实现的效果图： ...HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了： 类别编号 类别名称 类别组 状态 说明 <td>C00001 机车 机车 有效 <t
js实现复选框的全选和取消全选效果 在很多网站都有这样的功能，当点击一个全选按钮之后，所有的复选框都会被选中，再点击之后会取消全选，功能非常的人性化，可以省却很多人力，下面就简单介绍一下JS如何实现此功能，代码实例如下: 以下是代码： <...
基于JavaScript实现复选框的全选和取消全选 主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery复选框全选/取消示例 jquery复选框全选/取消示例,实现点击复选框的时候全选所有的子复选框，再点击取消所有复选框的选中状态
JS实现复选框的全选和批量删除功能 本文主要介绍了JS实现复选框的全选和批量删除功能的方法代码。具有很好的参考价值。下面跟着小编一起来看下吧
Axure RP 复选框全选、反选 用Axure RP 8.0做的原型设计列子，作用是复选框做全选和非全选，已选的做反选。可以学习下反选或非反选的交互思路。
微信小程序实现多选框全选与取消全选功能示例 主要介绍了微信小程序实现多选框全选与取消全选功能,结合实例形式分析了微信小程序多选框功能实现、布局显示及全选、取消全选相关操作技巧,需要的朋友可以参考下
QTableWidget表头添加复选框实现全选功能 QTableWidget表头添加复选框实现全选功能。有点投机取巧，但是功能是实现了。实现很简单。
JQuery复选框全选效果如何实现 主要介绍了JQuery复选框全选效果如何实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
HTML+JS实现一组复选框的全选、取消、反选 HTML+JS实现一组复选框的全选、取消、反选预计效果代码关键代码解释结果展示 预计效果 实现一组复选框的全选、反选、取消选中的功能，界面如下图 代码 该代码可在我的GitHub中找到，链接在此 <!DOCTYPE html>...
JS实现CheckBox复选框全选、不选或全不选功能 CheckBox复选框JS实现全选、不选、全不选功能，很简单，具体内容如下 思路： 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...
javascript 实现复选框全选/取消功能 javascript 实现复选框全选/取消功能
jQuery实现复选框全选/取消全选/反选及获得选择的值 主要介绍了jQuery实现的复选框全选/取消全选/反选及获得选择的值,需要的朋友可以参考下
Js实现复选框的全选、全不选反选功能代码实例 主要是用遍历的方法查找元素，然后通过改变checked的...复选框的选择</title> <style> #btn{ margin: 5px auto; } #btn>input{ font-size: 16px; color: #fff; background-color: rgb(110, 34, 1
linux网络内核书合集06 本合集是本人搜集的关于linux网络内核的书籍，都是经典，包含：（1）Linux网络体系结构：Linux内核中网络协议的设计与实现.chm （2）Linux网络内核分析与开发.pdf （3）嵌入式Linux网络体系结构设计与TCP／IP协议栈.pdf （4）深入理解LINUX网络技术内幕.pdf 第一本是英文版chm格式，其余三本均为中文版，扫描清晰
tera term 4.72源代码 tera term 是一款开源的的串口通讯软件,功能强大,而且开源,是windows下连接linux设备的首选软件
rtl8188eu_USB_linux.tar.gz TP-LINK TL-WN725N V2 Linux 驱动安装
24个带后台的小程序源码 24个带有后台的小程序源码下载,供大家交流学习(后台语言多种)
cisco路由器手册 这是从网络搜集的cisco路由器配置手册1-20册，和ios配置命令
敏捷软件开发－原则、模式与实践.pdf 本书讲授了一些原则、模式以及实践，它们可以帮助软件开发人员在追求美的程序、设计以及团队的道路上迈出第一步。本书探索了基本的设计原则，软件设计结构的通用模式以及有利于团队融为一个有机整体的一系列实践。本书包含了许多代码，仔细研读这些代码是学习本书所教授的原则、模式及时间的最有效方法
sqlcipher.rar打开微信数据库 sqlcipher gui版本和命令行版本 可以打开android微信加密的数据库， 亲测可用！
juniper路由器学习资料 从网络搜集的关于juniper的资源，包含 fru-mx960-acoustic.pdf fru-mx960-cable-manager.pdf JNCIA_学习指南中文.pdf Juniper_EX交换机中文操作手册V1.0.pdf Juniper_MX_路由器介绍.pdf Juniper_MX960配置模板v1.2.docx Juniper_netscreen.ppt Juniper路由器（M10i）配置手册.pdf Juniper路由器命令行配置手册.pdf Juniper路由器实验手册.pdf junos-cli.pdf junos-release-notes-13.3.pdf mx960-hwguide.pdf mx960-install-quick-start.pdf MX960操作维护介绍.pdf MX960路由器操作手册.pdf mx-series-line-card-guide.pdf
中国象棋人工智能论文集 这是本人收集的有关中国象棋人工智能的论文集 2009计算机博弈专辑文章.pdf Computer Games Are an Efficient Tool for Event Game Theory.pdf MINORS HASH TABLE IN COMPUTER CHINESE CHESS.pdf 中国象棋机器博弈的时间自适应分配策略研究.pdf 中国象棋计算机博弈中搜索算法的研究与改进.pdf 中国象棋计算机博弈关键技术分析.pdf 人工神经元网络结合TD(λ)算法在中国象棋机器博弈中的应用.pdf 博弈论的里程碑成果与局限性分析.pdf 基于剪枝策略的中国象棋搜索引擎研究.pdf 基于机器博弈的作战模拟系统探讨.pdf 大师级象棋机器人研究与开发.pdf 机器博弈研究面临的各种挑战.pdf 棋牌游戏与事件对策.pdf 积极开展民间棋类的计算机博弈活动.pdf 解剖大象的眼睛-中国象棋开发.pdf 计算机博弈原理与方法学概述.pdf
发帖
JavaScript
创建于2007-09-28

8.5w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2014-05-17 12:54
社区公告
暂无公告