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自定义路由时,一个需要注意的参数设置小细节. 举例来说,就是在访问 http://localhost/Home/About/arg1/arg2/arg3 这样的自定 ...

  2. 解决tomcat启动Socket监听端口死循环被hold问题

    原文链接:http://blog.csdn.net/dead_cicle/article/details/7073433 1.SOCKET监听置于servlet的init方法中,在web.xml里加入 ...

  3. WinStore之Application Data

    一.Application Data简介 Applicaion Data相当于桌面应用的注册表,存储一些用户配置信息,如运行时状态,用户喜好等,需要注意的时,当卸载应用时,这些数据会被删除,所以不要存 ...

  4. WebDriver基本API使用手册(基于Java和C#)

    WebDriver基本API使用手册(基于Java和C#) http://www.docin.com/p-747728551.html

  5. 移动端使用HTML5表单增强体验

    我们知道,HTML5新增了许多表单类型,如: number,email,url,tel,datetime,month,datetime-local等等,像datetime,month这些非常方便,免得 ...

  6. android判断EditText输入的数字、中文还是字母方法

    String txt = edInput.getText().toString(); Pattern p = Pattern.compile("[0-9]*");      Mat ...

  7. HTML5[7]: 实现网页版的加载更多

    理所当然,jQuery出场: $(function() { $(window).scroll(function() { if($(this).scrollTop() + $(this).innerHe ...

  8. Entity Framework Code First ---EF Power Tool MySql

    关于如何使用EF Power Tool的介绍请看 http://www.cnblogs.com/LingzhiSun/archive/2011/05/24/EFPowerTool_1.html, 这里 ...

  9. 自定义一个叫 ReadOnlyXmlMembershipProvider 的 MembershipProvider，用 XML 作为用户储藏室

    1. 配置 web.config <membership defaultProvider="AspNetReadOnlyXmlMembershipProvider"> ...

  10. C# 理解泛型

    出处:http://www.tracefact.net/CSharp-Programming/Generics-In-CSharp.aspx 术语表 generics:泛型type-safe:类型安全 ...