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

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


...全文
322 点赞 收藏 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>
 回复 赞
相关推荐
vue+vant-UI框架实现购物车的复选框全选和反选功能 主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
layui复选框的全选与取消实现方法 今天小编就为大家分享一篇layui复选框的全选与取消实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
react实现复选框全选和反选组件效果 主要为大家详细介绍了react实现复选框全选和反选组件效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现复选框的全选和取消全选效果 在很多网站都有这样的功能，当点击一个全选按钮之后，所有的复选框都会被选中，再点击之后会取消全选，功能非常的人性化，可以省却很多人力，下面就简单介绍一下JS如何实现此功能，代码实例如下: 以下是代码： <...
JS实现CheckBox复选框全选、不选或全不选功能 CheckBox复选框JS实现全选、不选、全不选功能，很简单，具体内容如下 思路： 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果 主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
el-select 下拉框多选实现全选的实现 主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于JavaScript实现复选框的全选和取消全选 主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
WPF实现带全选复选框的列表控件 本文将说明如何创建一个带全选复选框的列表控件。其效果如下图： 这个控件是由一个复选框（CheckBox）与一个 ListView 组合而成。它的操作逻辑： 当选中“全选”时，列表中所有的项目都会被选中；反之，取消选中...
jquery复选框全选/取消示例 jquery复选框全选/取消示例,实现点击复选框的时候全选所有的子复选框，再点击取消所有复选框的选中状态
微信小程序实现多选框全选与取消全选功能示例 主要介绍了微信小程序实现多选框全选与取消全选功能,结合实例形式分析了微信小程序多选框功能实现、布局显示及全选、取消全选相关操作技巧,需要的朋友可以参考下
JQuery复选框全选效果如何实现 主要介绍了JQuery复选框全选效果如何实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JQuery实现列表中复选框全选反选功能封装(推荐) 在做列表时经常会遇到全选，反选进行批量处理问题。通过本文给大家介绍JQuery实现列表中复选框全选反选功能封装，对jq复选框全选反选功能感兴趣的朋友一起看看吧
Js实现复选框的全选、全不选反选功能代码实例 主要是用遍历的方法查找元素，然后通过改变checked的...复选框的选择</title> <style> #btn{ margin: 5px auto; } #btn>input{ font-size: 16px; color: #fff; background-color: rgb(110, 34, 1
QTableWidget表头添加复选框实现全选功能 QTableWidget表头添加复选框实现全选功能。有点投机取巧，但是功能是实现了。实现很简单。
「风险评估」支持国产密码算法的OpenSSL设计实现及应用 - 金融安全.zip 「风险评估」支持国产密码算法的OpenSSL设计实现及应用 - 金融安全 WAF 基础架构安全 WAF 网络安全 APT
erlang-hipe-19.3.6.4-1.el7.x86_64.rpm erlang-hipe-19.3.6.4-1.el7.x86_64.rpm
authd-1.4.3-42.el7.x86_64.rpm 离线安装包，亲测可用
狂神说Linux01：概述及环境搭建.md 狂神说Linux01：概述及环境搭建.md
erlang-edoc-19.3.6.4-1.el7.x86_64.rpm erlang-edoc-19.3.6.4-1.el7.x86_64.rpm
发帖
JavaScript
创建于2007-09-28

8.5w+

社区成员

22.3w+

社区内容

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