Jquery复选框

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复选框的更多相关文章

  1. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  2. Thymeleaf+layui+jquery复选框回显

    一.Thymeleaf+layui+jquery复选框回显 基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...

  3. jquery 复选框

    jquery 选中复选框 $("input[type='checkbox']").prop("checked", true); jquery 判断复选框是否被选 ...

  4. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  5. Jquery复选框的全选全不选及选择所有复选框实现全选的复选框

    Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...

  6. jQuery 复选框全选反选

    <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click( ...

  7. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  8. jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换

    1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...

  9. jQuery——复选框操作

    学习jQuer对表单.表格操作的过程中,按照书上的例子发现一个问题: <!DOCTYPE html> <html> <head> <title>复选框应 ...

随机推荐

  1. Jquery复选框的全选全不选及选择所有复选框实现全选的复选框

    Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...

  2. JQuery制作网页——第八章 使用jQuery操作DOM

    1.DOM操作: DOM操作分为三类: ●DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById().getElementsByName: ●HTML-DOM:用于 ...

  3. STM32F407+STemwin学习笔记之STemwin移植

    原文链接:http://www.cnblogs.com/NickQ/p/8748011.html 环境:keil5.20  STM32F407ZGT6  LCD(320*240)  STemwin:S ...

  4. 运用busybox构建最小根文件系统

    平台:vmware下ubuntu14.04前期准备:安装交叉编译环境arm-linux-gcc-4.5.1;下载完成BusyBox 1.23.2一.busybox构建1.make menuconfig ...

  5. telnet 批处理

    **** 需要确认多台服务器端口是否打开,如果一个一个telnet会非常麻烦,通过百度,写了两个BAT,基本能做工作需要. ***start.bat start "" " ...

  6. SAP Odata実行命令(1)

    ＄count ＄Orderby:desc/asc ※＄Orderby＝ソートする項目 desc降順/asc昇順 を指定すること ＄Filter: ＄Skip,Top and Inline count: ...

  7. 为什么我要放弃javaScript数据结构与算法（第十一章）—— 算法模式

    本章将会学习递归.动态规划和贪心算法. 第十一章 算法模式 递归 递归是一种解决问题的方法,它解决问题的各个小部分,直到解决最初的大问题.递归通常涉及函数调用自身. 递归函数是像下面能够直接调用自身的 ...

  8. pylearn2报错缺少theano.compat.six

    按照官网的顺序下载 会出现缺少theano.compat.six的报错 纠结了一天,各种查,最后终于找到解决方法,theano安装有问题 不能安装最新版本,即pip的时候theano==0.7.0,然 ...

  9. Java基础—IO小结（二）缓冲流与其它流的使用

    一.缓冲流的使用 每个字节流都有对应的缓冲流: BufferedInputStream / BufferedOutputStream 构造器: 方法摘要与对应节点流类似 使用缓冲流实现文件复制:实际中 ...

  10. 宁波Uber优步司机奖励政策（8月24日到8月30日）

    本周奖励: 8月24日-8月30日: 滴滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http:// ...