1、checkbox list选择

<!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 runat="server">

    <title></title>

    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            // 全选

            $("#btnCheckAll").bind("click", function () {

                $("[name = chkItem]:checkbox").attr("checked", true);

            });

            // 全不选

            $("#btnCheckNone").bind("click", function () {

                $("[name = chkItem]:checkbox").attr("checked", false);

            });

            // 反选

            $("#btnCheckReverse").bind("click", function () {

                $("[name = chkItem]:checkbox").each(function () {

                    $(this).attr("checked", !$(this).attr("checked"));

                });

            });

            // 全不选

            $("#btnSubmit").bind("click", function () {

                var result = new Array();

                $("[name = chkItem]:checkbox").each(function () {

                    if ($(this).is(":checked")) {

                        result.push($(this).attr("value"));

                    }

                });

                alert(result.join(","));

            });

        });

    </script>

</head>

<body>

    <div>

        <input name="chkItem" type="checkbox" value="今日话题" />今日话题

        <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点

        <input name="chkItem" type="checkbox" value="财经" />财经

        <input name="chkItem" type="checkbox" value="汽车" />汽车

        <input name="chkItem" type="checkbox" value="科技" />科技

        <input name="chkItem" type="checkbox" value="房产" />房产

        <input name="chkItem" type="checkbox" value="旅游" />旅游

    </div>

    <div>

        <input id="btnCheckAll" type="button" value="全选" />

        <input id="btnCheckNone" type="button" value="全不选" />

        <input id="btnCheckReverse" type="button" value="反选" />

        <input id="btnSubmit" type="button" value="提交" />

    </div>

</body>

</html>

2、checkbox table选中

效果图：

<!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 runat="server">

    <title></title>

    <style type="text/css">

        table

        {

            border-collapse: collapse;

        }

        td

        {

            border: 1px solid #ccc;

        }

    </style>

    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            // chkAll全选事件

            $("#chkAll").bind("click", function () {

                $("[name = chkItem]:checkbox").attr("checked", this.checked);

            });

            // chkItem事件

            $("[name = chkItem]:checkbox").bind("click", function () {

                var $chk = $("[name = chkItem]:checkbox");

                $("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);

            })

        });

    </script>

</head>

<body>

    <table id="tb">

        <thead>

            <tr>

                <td>

                    <input id="chkAll" type="checkbox" />

                </td>

                <td>

                    分类名称

                </td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="今日话题" />

                </td>

                <td>

                    今日话题

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="视觉焦点" />

                </td>

                <td>

                    视觉焦点

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="财经" />

                </td>

                <td>

                    财经

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="汽车" />

                </td>

                <td>

                    汽车

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="科技" />

                </td>

                <td>

                    科技

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="房产" />

                </td>

                <td>

                    房产

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem" type="checkbox" value="旅游" />

                </td>

                <td>

                    旅游

                </td>

            </tr>

        </tbody>

    </table>

</body>

</html>

jQuery操作checkbox选择的更多相关文章

  1. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

  2. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  3. jQuery操作CheckBox的方法(选中,取消,取值)

    jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...

  4. JQuery操作CheckBox 第二次无法选中的问题

    用JQuery做CheckBox全选和反选的时候,遇到一个问题.当用JQ控制全选,全取消一次以后,再次点击全选,发现代码变了,但是CheckBox没有处于选中状态. 百度后得知: 我使用的方法是 $( ...

  5. Jquery 操作CheckBox ，RadioButtonList，DropDownList

    Jquery版本2.1.4 CheckBox 1.获取值: $("#chb").prop("checked"); RadioButtonList 1.获取值: ...

  6. 使用jquery 操作checkbox

    checkbox 的全选与全不选以及获取选择的值. 效果: <!DOCTYPE html> <html lang="en"> <head> &l ...

  7. JQuery 操作 checkbox 二次赋值无效 attr ----> prop

    CheckBox .attr('checked',false);  Chrome和火狐第二次点击无效. 然后解决了把attr 改成了 prop 以后操作属性的时候各位记下,用prop 因为大家用的都是 ...

  8. jQUery操作checkbox

    1 2 3 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <s ...

  9. jQuery操作checkbox实例

    示意图 <script type="text/javascript"> $(function () { $("#ddlNumber").change ...

随机推荐

  1. C++重要知识点小结---3

    C++重要知识点小结---1:http://www.cnblogs.com/heyonggang/p/3246631.html C++重要知识点小结---2:http://www.cnblogs.co ...

  2. nginx upstream的分配方式

    1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. 2.weight 指定轮询几率,weight和访问比率成正比,用于后端服务器性能不均的情况. 例 ...

  3. Java 设计模式学习总结（下）

    (八)模板方法 模板方法模式在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法的某些步骤. templateMethod()会依次调用 ...

  4. Delphi Val函数

    在这里Val和iif都是你所用的数据库中的函数在delphi中Val是一个将字符串转换为数字的函数,Val(S; var V; var Code: Integer)第一个参数是要转换的字符串,第二个参 ...

  5. 页面性能测试&提升方式

    性能测试包括:web系统页面测试.web系统后台测试 2种方式来提升你的web 应用程序的速度: ● 减少请求和响应的往返次数 ● 减少请求和响应的往返字节大小. 详细的看此文http://www.5 ...

  6. 基类，派生类，内存分配情况 .xml

    pre{ line-height:1; color:#1e1e1e; background-color:#d2d2d2; font-size:16px;}.sysFunc{color:#627cf6; ...

  7. Python 读取excel

    一.到python官网下载http://pypi.python.org/pypi/xlrd模块安装, sudo python setup.py install 二.使用介绍 1.导入模块 import ...

  8. 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

    1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...

  9. pip install 下载慢的问题

    建个文件 ~/.pip/pip.conf, 内容如下 [global] timeout = 6000 index-url = https://pypi.doubanio.com/simple [ins ...

  10. 统一入口的Ajax验证

    此前一直没有写博客的习惯,只是将一些心得和体会大致的用笔写在一个本子上,今天刚刚开通博客,就随便写一点吧! 关于服务端验证,大致可以分为登陆验证与功能权限验证,而以前端请求方式来区分的话,又可分为 1 ...