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. JavaScript基础事件（6）

    day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html#autoid-2-3-8 事件 HTML 4.0 的新特性之一是有能力使 HTML ...

  2. SpringBoot程序远程debug

    所谓的远程调试就是服务端程序运行在一台远程服务器上,我们可以在本地服务端的代码(前提是本地的代码必须和远程服务器运行的代码一致)中设置断点,每当有请求到远程服务器时时能够在本地知道远程服务端的此时的内 ...

  3. Google Guava 类库简介

    Guava 是一个 Google开发的 基于java的类库集合的扩展项目,包括 collections, caching, primitives support, concurrency librar ...

  4. [Swift实际操作]七、常见概念-(11)路径URL的使用详解

    本文将为你演示网址对象(URL)的使用 首先导入需要使用的界面工具框架 import UIKit 接着初始化一个指定网址的网址对象 let url = URL(string: "https: ...

  5. servlet中request和response

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...

  6. day 66 crm(3) 自创组件stark界面展示数据

    前情提要:  接着上一节的.stark自创组件的展示效果编写 展示数据 一:按照默认自带数据展示 即无一对一,一对多 1:先获取queryset对象 2:获取当前操作模型表对象数据 注意:list_d ...

  7. 【GDKOI2017】小队任务 莫比乌斯反演+杜教筛

    题目大意:给你n,求$\sum_{i=1}^{n}\sum_{j=i}^{n}[gcd(i,j)=1](i+1)(j+1)$ 子任务一:暴力 子任务二:$T=50000,n≤10^7$ 子任务三:$T ...

  8. 【poj1850】 Code 数位dp+记忆化搜索

    题目大意:给你一个字符串,问你这个字符串的rank,如果这个字符串不合法,请直接输出0.(一个合法的字符串是对于∀i,有c[i]<c[i+1]) 字符串s的rank的计算方式:以字符串长度作为第 ...

  9. activity和Task 有关的 Intent启动方式结合intent.setFlags()

      通过设置Intent对象的标记,来改变当前任务堆栈中既存的Activity的顺序: FLAG_ACTIVITY_NEW_TASK----简而言之,跳转到的activity根据情况,可能压在一个新建 ...

  10. h5 端图片上传

    1.upload.js (function($) { $.extend($.fn, { images : new Array(), initImages:function (images) { $.e ...