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. ASP.NET MVC 的自定义模型属性别名绑定

    最近在研究 ASP.NET MVC 模型绑定,发现 DefaultModelBinder 有一个弊端,就是无法实现对浏览器请求参数的自定义,最初的想法是想为实体模型的属性设置特性(Attribute) ...

  2. cocos2dx在ubuntu下配置声音引擎

    声音引擎库和cocos2dx的库是分开的我们要使用的时候不得不重新修改一下makefile,首先我们要找到声音引擎库的位置,在cocos2dx的 根目录下有一个lib文件,看一下是否存在libcoco ...

  3. log4net使用的关键点

    <configSections>     < section name =" log4net" type="log4net.Config.Log4Net ...

  4. 将在本地创建的Git仓库push到Git@OSC

    引用自:http://my.oschina.net/flan/blog/162189 在使用git 处理对android的修改的过程之中总结的.但不完善 Git push $ git push ori ...

  5. zepto - slice

    var ss = ['1', '2', '3', '4', '5', '6']; console.log(ss.slice(2,4));

  6. Spring.Net.FrameworkV3.0 版本发布了，感谢大家的支持

    Spring.Net.FrameworkV3.0 版本发布了,感谢大家的支持. Spring.Net.Framework,基于.NET的快速信息化系统开发.整合框架,为企业或个人在.NET环境下快速开 ...

  7. ruby -- 基础学习（三）设置中国时区时间

    Rails连接MYSQL数据库,默认显示UTC时间.如果想要改成中国时区时间,按照下面修改: 在config/application.rb中找到 class Application < Rail ...

  8. C++的最佳特性（译）

    最近看到了很多优秀的文章,包括<Why mobile web apps are slow>,实在忍不住翻译出来跟大家分享.这篇文章通过大量的实验和参考文献向我们说明移动应用开发所遇到的问题 ...

  9. 【转载】Linux动态库搜索路径的技巧

    转自:http://soft.chinabyte.com/os/232/11488732_2.shtml 众所周知,Linux动 态库的默认搜索路径是/lib和/usr/lib.动态库被创建后,一般都 ...

  10. [ASP.NET] 下一代ASP.NET开发规范：OWIN

    今天投简历 准备面试了... 本节目录: OWIN简介 OWIN规范 Katana Hello World(3种Host) 自定义Middleware OWIN简介 OWIN(Open Web Int ...