jquery实现checkbox 全选/全不选的通用写法_jquery

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        //name 是html表单专用于区别各组 chechbox 的属性, 不要用id(必须唯一)或者其它属性
        function getValues() {
            var aV = getCheckboxValues("a");
            var bV = getCheckboxValues("b");
            var cV = getCheckboxValues("c");

            var result = "a组选中值: " + (aV=="" ? "未选中任何值" : aV) + "\n" +
                "b组选中值: " + (bV == "" ? "未选中任何值" : bV) + "\n" +
                "c组选中值: " + (cV == "" ? "未选中任何值" : cV);

            alert(result);
        }

        function getCheckboxValues(name) {
            return $(":checkbox[name="+name+"]:checked").map(function(){ 
                return $(this).val();
            }).get().join(",");
        }

        function chkAll(obj) {
            var name = $(obj).attr("name");
            //也许你觉得我写得太复杂, 但jquery 版本众多, 可以学点东西总是好的
            //1. jquery 1.6 以上
            //$(":checkbox[name=" + name.substring(0, 1) + "]").prop("checked", $(obj).prop("checked"));
            //2. jquery 1.6 以下
            //$(":checkbox[name=" + name.substring(0, 1) + "]").attr("checked", $(obj).attr("checked"));
            //3. 通用写法
            $(":checkbox[name=" + name.substring(0, 1) + "]").each(function () {
                this.checked = obj.checked;
            });
        }
    </script>
</head>
<body>
    <div >
        <span>第1组(a):<input type="checkbox" name="aAll" onclick="chkAll(this)" />全选/全不选</span>
        <input type="checkbox" name="a" value="a1" checked="checked" />a1
        <input type="checkbox" name="a" value="a2" checked="checked"  />a2
        <input type="checkbox" name="a" value="a3" />a3
        <input type="checkbox" name="a" value="a4" />a4<br />

        <span>第2组(b):<input type="checkbox" name="bAll" onclick="chkAll(this)" />全选/全不选</span>
        <input type="checkbox" name="b" value="b1" />b1
        <input type="checkbox" name="b" value="b2" checked="checked" />b2
        <input type="checkbox" name="b" value="b3" checked="checked"  />b3
        <input type="checkbox" name="b" value="b4" />b4<br />

        <span>第3组(c):<input type="checkbox" name="cAll" onclick="chkAll(this)" />全选/全不选</span>
        <input type="checkbox" name="c" value="c1" />c1
        <input type="checkbox" name="c" value="c2" />c2
        <input type="checkbox" name="c" value="c3" checked="checked" />c3
        <input type="checkbox" name="c" value="c4" checked="checked"  />c4<br />

        <br />
        <input type="button" value="查找每组的选中的值" onclick="getValues()" />
    </div>
</body>
</html>

时间: 2016-02-22

jquery实现checkbox 全选/全不选的通用写法_jquery的相关文章

jquery中表单 多选框的一种巧妙写法_jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> &l

解决jquery操作checkbox火狐下第二次无法勾选问题

 在工作中使用jquery操作checkbox,进行全选.反选,现在的问题是火狐下第二次无法勾选问题,在下面有个详细的解答,感兴趣的朋友可以参考下 最近在工作中使用jquery操作checkbox,使用下面方法进行全选.反选:  复制代码 代码如下: var ischecked=allCheckObj.is(':checked');  ischecked?checksObj.attr('checked',true):checksObj.attr('checked',false);    调试时在

jquery实现checkbox 全选/全不选的通用写法

 本篇文章主要是对jquery实现checkbox 全选/全不选的通用写法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>     <script type="text/javascript" src="http://ajax.google

jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码

 本篇文章主要是对jQuery判断checkbox(复选框)是否被选中以及全选.反选实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jQuery判断checkbox(复选框)是否被选中: if($("#id").attr("checked")==true)   jQuery实现checkbox(复选框)选中.全选/反选代码:    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

jquery中checkbox全选失效的解决方法_jquery

如果你使用jQuery 1.6 ,代码if ( $(elem).attr("checked") ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop() 来改变其值.推荐使用上述方法之一,来取得 checked 的值. 使用jQu

jQuery实现checkbox全选的方法_jquery

本文实例讲述了jQuery实现checkbox全选的方法.分享给大家供大家参考.具体分析如下: 通过checkbox 进行全选和取消全选的操作,如果通过toggle进行处理,则会出现checkbox无法显示对勾的问题. 使用click事件,根据checked属性进行判断即可. 示例: $("#chkRreviewOffline").click(function(){ if(this.checked){ $('#review-offline .btn_checkbox input[typ

控制全选-jquery控制checkbox是否选中,第二次全选时没有作用。

问题描述 jquery控制checkbox是否选中,第二次全选时没有作用. $(function(){ var powerList = ${jsonStr}; var actions = '${actions}'; for(i=0;i<powerList.length;i++){ $("#"+powerList[i].pId).append("<input name='checkbox' type='checkbox' value='"+powerLis

利用jQuery实现CheckBox全选/全不选/反选的简单代码_jquery

jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional

原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)_javascript技巧

日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数. 功能介绍点此查看DEMO演示 1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致; 2. 自动更改 全选/全不选 选框的状态, 即列