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. poj3233 Matrix Power Series（矩阵快速幂）

    题目要求的是 A+A2+...+Ak,而不是单个矩阵的幂. 那么可以构造一个分块的辅助矩阵 S,其中 A 为原矩阵,E 为单位矩阵,O 为0矩阵    将 S 取幂,会发现一个特性: Sk +1右上角 ...

  2. position:absolute元素 怎样居中

    <div style = 'height:20px;position:absolute;z-index:9999;top:0;left:0;right:0;margin:auto;'> & ...

  3. 《Vue 编程房内考》

    古人有云:码农爱coding,则为之计深远. 众人问:何为之? 古人曰:底层.算法和架构. 众木然. 古人又曰:多看源码. 以下内容是我在学习 Vue-2.5.2 源码时的一个总结. 第一章 活捉Vu ...

  4. CentOS7搭建FastDFS V5.11分布式文件系统-第一篇

    1.绪论 最近要用到fastDFS,所以自己研究了一下,在搭建FastDFS的过程中遇到过很多的问题,为了能帮忙到以后搭建FastDFS的同学,少走弯路,与大家分享一下.FastDFS的作者淘宝资深架 ...

  5. 【NOIP2017】列队 splay

    当年太菜了啊,连$60$分的暴力都没拿满,只打了一个$30$分的. 考虑到这题最多只会询问到$30W$个点,且整个矩阵会去到$30W\times 30W$,显然不能将所有的点存下来. 对于每一行(除最 ...

  6. (转)Mysql备份还原数据库之mysqldump实例及参数详细说明

    http://www.xuejiehome.com/blfl-2.html http://www.cnblogs.com/xuejie/archive/2013/01/11/2856911.html ...

  7. Ubuntu链接库查找

    apt-get install apt-file apt-get update apt-file search

  8. Django中涉及金融的项目

    在Django中,如果一个项目涉及了金融,他的要求是十分严格的. 所以嘞,这里就有一些坑,很多坑,第一次开发的时候很容易出现一系列的错误 在涉及金融计算的地方,不能使用float类型 什么鬼,但事实就 ...

  9. protocol buffers生成go代码原理

    本文描述了protocol buffers使用.proto文件生成pb.go文件的过程 编译器 编译器需要插件来编译环境,使用如下方式安装插件:go get github.com/golang/pro ...

  10. ASP.NET Core 中的缓存

    目录 缓存的基本概念 缓存原理 缓存设计 分布式缓存 Memcache 与 Redis 的比较 缓存穿透,缓存击穿,缓存雪崩解决方案 数据一致性 使用内置 MemoryCache 使用分布式缓存 Re ...