Jquery全选系列操作（锋利的jQuery）

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>复选框应用</title>

    <script src="../../js/jquery-1.4.4.min.js"></script>

</head>

<body>

    <form >

        你爱好的运动是？<br />

        <input type="checkbox" name="items" value="足球" />足球

        <input type="checkbox" name="items" value="篮球" />篮球

        <input type="checkbox" name="items" value="羽毛球" />羽毛球

        <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />

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

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

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

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

    </form>

    <!--<form style="display:none" >

        你爱好的运动是？<br />

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

        <input type="checkbox" name="items" value="足球" />足球

        <input type="checkbox" name="items" value="篮球" />篮球

        <input type="checkbox" name="items" value="羽毛球" />羽毛球

        <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />

    </form>-->

    <script>

        $(function ()

        {

            //全选

            $("#CheckedAll").click(function () {

                 $('[name=items]:checkbox').attr("checked", true);  //attr() 方法设置或返回被选元素的属性值。

                //下面只是研究,或者是可参考,（我还没弄懂）

                //判断如果当前复选框被选中

                //if (this.checked) {

                //    $('[name=items]:checkbox').attr("checked", true);  //attr() 方法设置或返回被选元素的属性值。

                //}

                //else {

                //    $('[name=items]:checkbox').attr("checked", false);  //attr() 将checked 设置为false即被全不选。

                //}

                //$('[name=items]:checkbox').attr("checked", this.checked);  //attr() 方法设置或返回被选元素的属性值。

                //可以去掉if判断

                //$('[name=items]:checkbox').click(function () {

                //    var flag = true;

                //    $('[name=items]:checkbox').each(function () {

                //        if (!this.checked) {

                //            flag = false;

                //        }

                //    });

                //    $("#checkedall").attr("checked", flag);

                //})

            });

            //全不选

            $("#CheckedAllNo").click(function () {

                $('[name=items]:checkbox').attr("checked", false);  //attr() 将checked 设置为false即被全不选。

            });

            //反选,如果选中，则不选中，如果不选中则选中

            //$("#CheckedRev").click(function () {

            //    $('[name=items]:checkbox').each(function () {

            //        $(this).attr("checked", !$(this).attr("checked"));  //$(this)取出当前对象并转换为jQuery对象

            //    })

            //});

            //代码简化反选

            $("#CheckedRev").click(function () {

                $('[name=items]:checkbox').each(function () {

                    this.checked = !this.checked;

                })

            });

            //提交显示选中的check值

            $("#send").click(function ()

            {

                var str = "你选中的是\r\n";

                $('[name=items]:checkbox:checked').each(function () {

                    str += $(this).val() + "\r\n";

                });

                alert(str)

            })

        })

    </script>

</body>

</html>

　　

Jquery全选系列操作（锋利的jQuery）的更多相关文章

  1. jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  2. Jquery全选与反选checkbox（代码示例）

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

  3. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  4. jquery全选,取消全选

    近期项目又用到了这个全选和取消全选的操作. 曾经总是自己写纯JS.如今既然知道怎么写了.那怎样用JQ写得更简洁呢.这样也能学到新的东西.假设乎百度一下果然发现了好东东.感谢OSC的iuhoay. 代码 ...

  5. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery 全选功能

    1.直接全选(复选框名字要统一) <input type="CHECKBOX" id="cbSelectAll" onclick="$('inp ...

  7. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

    好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...

  8. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  9. jquery全选，全不选，反选

    前台 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.o ...

随机推荐

  1. Flask从入门到精通之使用Flask-Migrate实现数据库迁移

    在开发程序的过程中,你会发现有时需要修改数据库模型,而且修改之后还需要更新数据库.仅当数据库表不存在时,Flask-SQLAlchemy 才会根据模型进行创建.因此,更新表的唯一方式就是先删除旧表,不 ...

  2. [As3.0] 获取本机信息

    package { import flash.display.Sprite; import flash.events.Event; import flash.net.NetworkInfo; impo ...

  3. 记一次使用SecureCRT连接局域网巨慢的问题

    环境:Win7 32bit + SecureCRT 6.5 中文 使用工作机上的SecureCRT登录公司内网的跳板机,发现很慢,每次都得等待好几分钟才弹出输出私匙密码的框.咨询了一下其他同事,发现他 ...

  4. javascript数据结构与算法--二叉树遍历（先序）

    javascript数据结构与算法--二叉树遍历(先序) 先序遍历先访问根节点, 然后以同样方式访问左子树和右子树 代码如下: /* *二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 * ...

  5. DataTable自身查询方法

    这里说到的查询有两种. 1.DataTable.Select 2.DataTable.Rows.Find   a>先建立一个DataTable供使用吧. /// <summary> ...

  6. 【es6】class

    class是es6引入的最重要特性之一.在没有class之前,我们只能通过原型链来模拟类. 基本用法 如果你用过java这样的纯面向对象语言,那么你会对class的语法非常熟悉. class Peop ...

  7. Android Studio修改字体大小

    android studio提供的主题是不能修改字体和字体大小的,如果要修改大小就的另存一份自定义的主题了. 1.启动Android Studio,菜单"File"-"S ...

  8. Android 开发工具类 30_sendXML

    String xml = "<?xml version=\"1.0" encoding=\"UTF-8"?> <persons> ...

  9. 怎么将一张100KB以上大小的电子图片压缩成30KB以内

    不多说,直接上干货! 方法一: 怎么将一张100KB以上大小的电子照片压缩成30KB以内. 先将这张100KB以上大小的电子照片,新建一个word,放入.选中照片,右击,另存为,格式依然还是选择.jp ...

  10. gensim学习笔记

    1.词向量建模的word2vec模型和用于长文本向量建模的doc2vec模型 在Gensim中实现word2vec模型非常简单.首先,我们需要将原始的训练语料转化成一个sentence的迭代器:每一次 ...