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. 【python入门】之教你编写自动获取金币脚本

    本文作者:青衫磊落 最近看到个特别全面源码分享网站,刚好有个项目是一直想做但是没有头绪的,就想下载学习一下.注册账号后,发现还需要若干金币.后来发现可以通过每隔一定时间发心情状态来获得金币,就打算写一 ...

  2. RabbitMQ交换机规则实例

    RabbitMQ Exchange分发消息时根据类型的不同分发策略有区别,目前共四种类型:direct.fanout.topic.headers .headers 匹配 AMQP 消息的 header ...

  3. Java之常用类库

    1.Java常用类库(一):http://blog.csdn.net/e6894853/article/details/7925469 1.Java常用类库(二):http://blog.csdn.n ...

  4. 安装Apache时端口号被占用解决方案

    有些朋友的电脑在安装Apache是会遇到端口冲突的问题.以下是一种解决方案 1.打开控制面板的管理工具 2.打开IIS 3.观察网站下的端口号 4.点击绑定 5.更改端口号 6.重新启动即可

  5. Hibernate之mappedBy与@JoinColumn

    @JoinColumn所在实体是关系拥有方,name即拥有方对应表到参考表的外键名称. @mappedBy所在实体是关系的被拥有方,value值owner中表示被拥有类的属性. 在单向关系中不需要设置 ...

  6. NSTimer、performSelector 函数没有被调用的原因

    performSelector 指定的方法没有被调用 Invokes a method of the receiver on the current thread using the default ...

  7. iOS完全自学手册——［一］Ready？No！

    1.前言 今天开始我会不定期写一些iOS自学的相关文章.毕竟,自己是自学开始,知道自学有哪些坑,知道自学对于开发欠缺什么,此外,加上现在的实际开发经验,希望能给自学的iOS开发者一些建议. 2.Rea ...

  8. HBase Cli相关操作

    修改HBase表结构之前首先需要disable表,然后进行更改相关表结构信息,最后enable表,如下 1. 动态添加一个或多个列簇 hbase(main):034:0> describe 'H ...

  9. java 中几种常用数据结构

    Java中有几种常用的数据结构,主要分为Collection和map两个主要接口(接口只提供方法,并不提供实现),而程序中最终使用的数据结构是继承自这些接口的数据结构类. 一.几个常用类的区别 1．A ...

  10. Android 开发工具类 10_Toast 统一管理类

    Toast 统一管理类: 1.短时间显示Toast: 2.长时间显示 Toast: 3.自定义显示 Toast 时间. import android.content.Context; import a ...