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. Xcode 6 UITextField 键盘不弹出

    iOS Simulator -> Hardware -> Keyboard Uncheck "Connect Hardware Keyboard"

  2. 字节对齐导致的iOS EXC_ARM_DA_ALIGN崩溃

    本文原链接: http://www.cnblogs.com/zouzf/p/4455167.html 先看一下这个链接:http://www.cnblogs.com/ren54/archive/201 ...

  3. nodejs初窥

    1. node.js不是js应用,而是js运行平台.Node.js采用C++编写,是一个js的运行环境. 2. node.js采用事件驱动.异步编程,为网络服务而设计.Node.js的网络应用模块包括 ...

  4. IBM powerVM VIOS

    引言 随着信息化技术不断发展,各个企业 IT 基础架构也在不断朝向虚拟化,大数据,云计算等精简,整合的趋势发展.虚拟化技术就显得尤为重要.今天要给大家介绍的是 Power 服务器虚拟化技术中的一小部分 ...

  5. Malek Dance Club（递推）

    Malek Dance Club time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  6. 发布大幅重构优化的 TouchVG 1.0.2

    发布大幅重构优化的 TouchVG 1.0.2,支持SVG.多模块扩展结构,欢迎评阅改进.提交pull request. https://github.com/rhcad/touchvg 关于 Tou ...

  7. 谷歌正式发布Google APIs Client Library for .NET

    好消息,特大好消息! 英文原文:Google API library for .NET paves the way for Google services on Windows phone 本月 17 ...

  8. Spring Remoting: HTTP Invoker--转

    原文地址:http://www.studytrails.com/frameworks/spring/spring-remoting-http-invoker.jsp Concept Overview ...

  9. 通过组策略实现IE自动以当前域账号登录某站点

    SharePoint基于windows验证的如何通过组策略实现IE自动以当前域账号登录某站点 1. 在运行中运行MMC,启动“组策略对象编辑器”. 如下图: 2.找到组策略,如下图: 3.找到对应的域 ...

  10. JS&CSS文件请求合并及压缩处理研究（三）

    上篇我们进行了一些代码方面的准备工作.接下来的逻辑是:在View页面解析时,通过 Html.AppendResFile 方法添加的资源文件,我们需要按照分组.优先级,文件名等条件,对其路径进行合并.具 ...