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. pymongo学习第1篇——增删改查

    参考文档: 1.https://docs.mongodb.org/getting-started/python/ 2.http://api.mongodb.org/python/current/api ...

  2. POJ 1111

    #include<iostream> #define MAXN 30 using namespace std; char _m[MAXN][MAXN]; bool mark[MAXN][M ...

  3. Java之IO(十四)IO包中其它类

    转载请注明出处:http://www.cnblogs.com/lighten/p/7267553.html 1.前言 此章介绍IO包中剩余未介绍的几个流和工具类,包括LineNumberReader. ...

  4. spring boot启动加载数据

    实际应用中,我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求.为了解决这样的问题,spring Boot 为我们提供了一个方法,通过实现接口 CommandLineRunner 来实 ...

  5. asp.net MVC 多系统目录结构

    学习了几天的mvc5,发现vs把所有的控制器都放在同一个目录Controllers目录下,细想一下,假如一个项目包含几个系统: 行政办公系统.培训管理系统.督办管理系统.会议管理系统…… 如果还把控制 ...

  6. Android 开发工具类 01_AppUtils

    1.获取应用程序名称: 2.获取应用程序版本信息. import android.content.Context; import android.content.pm.PackageInfo; imp ...

  7. java.io.Serializable的作用

    Serializable,之前一直有使用,默认的实体类就会实现Serializable接口,对具体原因一直不是很了解,同时如果没有实现序列化,同样没什么影响,什么时候应该进行序列化操作呢?今天查了下资 ...

  8. 深入理解Java虚拟机：垃圾收集器与内存分配策略

    目录 3.2 对象已死吗 判断一个对象是否可被回收 引用类型 finalize() 回收方法区 3.3. 垃圾收集算法 1.Mark-Sweep(标记-清除)算法 2.Copying(复制)算法 3. ...

  9. 学习笔记---log4j的使用与配置

    Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式. 日志信息的优先级从高到低有OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL,分别用来 ...

  10. 别被官方文档迷惑了！这篇文章帮你详解yarn公平调度

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由@edwinhzhang发表于云+社区专栏 FairScheduler是yarn常用的调度器,但是仅仅参考官方文档,有很多参数和概念文 ...