1.概述

在项目中经常遇到列表中对复选框进行勾选操作，全选。。。反选。。

2. example

<html>

<body>

<form id="test-form" action="test">

    <legend>请选择想要学习的编程语言：</legend>

    <fieldset>

        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>

        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>

        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>

        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>

        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>

        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>

        <p><button type="submit">Submit</button></p>

    </fieldset>

</form>

<script src="jquery-3.1.0.js"></script>

<script type="text/javascript">

$(function(){

  (function(){

    var

        form = $('#test-form'),

        langs = form.find('[name=lang]'),

        selectAll = form.find('label.selectAll :checkbox'),

        selectAllLabel = form.find('label.selectAll span.selectAll'),

        deselectAllLabel = form.find('label.selectAll span.deselectAll'),

        invertSelect = form.find('a.invertSelect');

        // 重置初始化状态:

        form.find('*').show().off();

        form.find(':checkbox').prop('checked', false).off();

        deselectAllLabel.hide();

        // 拦截form提交事件:

        form.off().submit(function (e) {

            e.preventDefault();

            alert(form.serialize());

        });

  var count = 1;   //点击全选/全不选框次数

    selectAll.click(function(){

        if(count++ %2){

             selectAllLabel.hide();

             deselectAllLabel.show();

             $(this).prop("checked", false);

             langs.prop("checked", true);

        }else {

             selectAllLabel.show();

             deselectAllLabel.hide();

             $(this).prop("checked", false);

             langs.prop("checked", false);

        }

    });

    invertSelect.on('click', function(){

        langs.map(function(){

             $(this).prop('checked', !this.checked);

        });

    });

  })();

});

</script>

</body>

</html>

jquery 全选 全不选 反选的更多相关文章

  1. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  2. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  3. jQuery实现的全选、反选和不选功能

    适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 ...

  4. 用jQuery实现全选-全不选-反选的功能

    临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利 古人云:学而时习之,不亦说乎. 学习后经常温习所学的知识,也是件令人愉悦的 ...

  5. jQuery实现全选、不选和反选功能

    jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...

  6. jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...

  7. jQuery实现的全选、反选和获取当前所有选中的值功能

    链接: jQuery实现的全选.反选和获取当前所有选中的值功能 <ul id="list"> <li><label><input type ...

  8. Java 多选框的全选、多选、反选（JQuery 实现）

    jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...

  9. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

随机推荐

  1. Show Linux Package Sort By Size

    ArchLinux: ~ $ pacsysclean Debian: ~ $ sudo apt-get install debian-goodies ~ $ dpigs -H

  2. CLR via C#深解笔记七 - 自动内存管理（垃圾回收）

    每个应用程序都要使用这样或者那样的资源,比如文件.内存缓冲区.屏幕空间.网络连接.数据库资源等.事实上,在面向对象的环境中,每个类型都代表可供程序使用的一种资源. 要使用这些资源,必须为代表资源的类型 ...

  3. JAVA字节码解析

    Java字节码指令 Java 字节码指令及javap 使用说明 ### java字节码指令列表 字节码 助记符 指令含义 0x00 nop 什么都不做 0x01 aconst_null 将null推送 ...

  4. drupal7 form模板复写方法

    给form制作一个template 从官方的drupal api document中可得到form有#theme这个参数,它可以指定form使用一个模板来用于form的基本布局,#theme的值必须是 ...

  5. crontab 定时调度

    crontab -e */1 8-23 * * * /www/target/sh/myorder.sh & 0 1 * * * /www/target/php/sh/mymoney.sh &a ...

  6. Flex Array 与 ArrayCollection.转自网络

    1.array作为控件使用 FLEX3写法: <mx:Array id="barname"> <mx:String>Flash</mx:String& ...

  7. 蓝凌表单的表体调用Javascript

    应用场景:像请假类表单会在从表输入开始时间.结束时间等字段 需求1:客户希望根据开始.结束时间自动计算小时数 解决方法: 1.主表单增加一行,设三个字段[开始时间合计].[结束时间合计].[开始结束时 ...

  8. 金蝶EAS常用表

    select * from T_SCM_BillType where FName_L2 like '%委外%'   --单据类型表,查业务单据对应的表  102--销售出库单  330--应收单 se ...

  9. Linux内核Makefile文件(翻译自内核手册)

    --译自Linux3.9.5 Kernel Makefiles(内核目录documention/kbuild/makefiles.txt) kbuild(kernel build) 内核编译器 Thi ...

  10. 代码演示 .NET 4.5 自带的 ReadonlyCollection 的使用

    代码如下: 1. using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...