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. AX2012 R3升级CU8的一些错误

    AX2012 R3安装升级包CU8后进入系统,系统会提示打开软件升级清单“Software update checklist”,清单列出了升级要做的一系列动作. 在进行到编译应用时“Compile a ...

  2. MYSQL 的一些文件及说明

    1.MySQL库目录下db.opt文件的作用 http://my.oschina.net/u/1462678/blog/232719 2.复制MySQL数据库A到另外一个MySQL数据库B(仅仅针对i ...

  3. WIN8 下Cisco VPN连接 出现vpn 422 failed to enable virtual adapter错误

    今天在家用VPN软件连接,出现了“vpn 422 failed to enable virtual adapter”的错误,系统安装的是Win8专业版32位,百度了半天又很多方法解决不了,后来发现了一 ...

  4. spring中bean配置和bean注入

    1 bean与spring容器的关系 Bean配置信息定义了Bean的实现及依赖关系,Spring容器根据各种形式的Bean配置信息在容器内部建立Bean定义注册表,然后根据注册表加载.实例化Bean ...

  5. Mobilize.Net Silverlight bridge to Windows 10 UWP

    Windows UWP 既 Windows 10 Universal Windows platform,这个微软基于Windows NT内核的个运行时(Runtime)平台,此平台横跨所有的 Wind ...

  6. linq join多字段

    from VS in m2db.Inf_VehicleSale join RS1 in m2db.His_RecSale on new { VS.vehicleCode, auctionCode=VS ...

  7. 基于Eclipse搭建Hadoop源码环境

    Hadoop使用ant+ivy组织工程,无法直接导入Eclipse中.本文将介绍如何基于Eclipse搭建Hadoop源码环境. 准备工作 本文使用的操作系统为CentOS.需要的软件版本:hadoo ...

  8. 在MACOS上实现交叉编译

    在嵌入式开发过程中,设备的存储空间和运算能力通常会比较低,这时候,比如要编译一个linux的内核,嵌入式设备就不能胜任了,所以,实现交叉编译还是很必要的.通过交叉编译,我们就能够在我们的pc上编译出能 ...

  9. [iOS]关于视频方向的若干问题

    版本: OS X 10.10.5 Xcode 6.4(6E35b) iOS >= 7  一.MOV/MP4视频文件中的Rotation元数据 iOS上内置相机应用录制的mov/mp4视频可能产生 ...

  10. 实现3D旋转效果的方法

    Android中有一种旋转效果,是将一个图片进行360度的旋转. Matrix的作用是对平面上的View进行缩放.平移.旋转,每一种操作都配了setXXX.preXXX.postXXX三个函数. Ca ...