<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script type="text/javascript" src='http:cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>

</head>

<body>

    <form>

        <input type="checkbox" class="all"> 全选

        <input type="checkbox" class="reverse"> 反选

        <input type="checkbox" value="1" class="sub"> 1

        <input type="checkbox" value="2" class="sub"> 2

        <input type="checkbox" value="3" class="sub"> 3

        <input type="checkbox" value="4" class="sub"> 4

        <input type="button" value="click">

        <input type="reset">

    </form>

    <script type="text/javascript">

    $(function() {

        $('.all').on('click', function(e) {

            var isChecked = $(this).prop("checked");

            $(".sub").prop("checked", isChecked);

        })

        $('.reverse').on('click', function(e) {

            $(".sub").each(function(index, ele) {

                var checked = $(ele).is(':checked') ? '' : 'checked'

                $(ele).prop("checked", checked);

            })

        })

        $('.sub').on('click', function(e) {

            var checked = ($('.sub').length == $('.sub:checked').length ? 'checked' : '')

            $('.all').prop('checked', checked)

        })

        $("input[type='button']").bind('click',function(){

            var obj = $('.sub').map(function(index,ele){

                return $(ele).val()

            })

            var arr = Array.prototype.slice.call(obj)

            alert(JSON.stringify(arr))

        })

    })

    </script>

</body>

</html>

jQuery 之玩转 checkbox的更多相关文章

  1. jquery数组之存放checkbox全选值示例代码

    使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...

  2. jQuery 操作 input 之 checkbox

    jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...

  3. JQuery 多选按钮checkbox

    JQuery 多选按钮checkbox 在需要全选和选择部分的时候我们就需要多选在这里主要介绍了具体的实现 JQuery $(function () { //全选或全不选 $("#allbo ...

  4. jquery选中radio或checkbox的正确姿势

    jquery选中radio或checkbox的正确姿势 Intro 前几天突然遇到一个问题,没有任何征兆的..,jquery 选中radio button单选框时,一直没有办法选中,后来查了许多资料, ...

  5. jquery的radio和checkbox的标签的操作集合

    jquery的radio和checkbox的标签的操作集合: $("input[name='radio_name'][checked]").val(); //选择被选中Radio的 ...

  6. jquery选择器玩得不6啊，只能慢慢写判断了，唉..........................

    jquery选择器玩得不6啊,只能慢慢写判断了,唉..........................

  7. JQuery 实现多个checkbox 只选中一个

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. [转]jQuery操作radio、checkbox、select 集合.

    1.radio:单选框 html代码 <input type="radio" name="radio" id="radio1" val ...

  9. 《jQuery判断radio、checkbox、select 是否选中和设置选中问题以及获取选中值》总结

    <form> <input type="radio" name="gender" id="man" value=" ...

随机推荐

  1. Entity Framework,TransactionScope 混合使用的问题讨论

    using (var ts = new TransactionScope()) { string connStr = "Data Source=.;Initial Catalog=Test; ...

  2. Forget Java to learn Javascript from 0.--Preface

    I'm going to start to learn Javascript in this month. Someone told me you can't learn another langua ...

  3. mvc日期控件datepick的几篇文章，日后再总结吧

    instinctcoder里有两篇,入门级的 http://instinctcoder.com/asp-net-mvc-4-jquery-datepicker/ http://instinctcode ...

  4. C# 6.0 功能预览

    C# 6.0 功能预览 (一) 一.索引的成员和元素初始化 1.1 原始初始化集合 Dictionary 1.2 键值初始化集合 Dictionary 1.3 运算符 $ 初始化集合 Dictiona ...

  5. JavaScript原生数组函数

    有趣的JavaScript原生数组函数 在JavaScript中,可以通过两种方式创建数组,构造函数和数组直接量, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typ ...

  6. Windows Store 应用

    使用 Project Siena 生成一个 Windows Store 应用   继 App Studio 之后微软又一力作 Project Siena [Win8 应用神器]给初学开发 或 对 Wi ...

  7. C# 号码归属地查询算法

    C# 号码归属地查询算法(根据Android来电归属地二进制文件查询修改) 前言 近期有个项目需要用到号码归属查询,归属地数据库可能比不上ip138,淘宝上也有卖的-,-! 文本提供一个279188条 ...

  8. Objective-C Blocks测试题与解析

    Objective-C Blocks测试 你真的理解blocks在objective-c中是如何工作的了吗,做个测试检验一下吧. 所有的测试结果已被以下版本的LLVM验证: Apple clang v ...

  9. github开源项目

    开源一小步,前端一大步   作为一名前端攻城狮,相信不少人已经养成了这样的习惯.当你进入一个网站,总会忍不住要打开控制台看下它是如何布局的,动画是如何实现的等.这也是前端开发者一个不错的的学习途径. ...

  10. Attempted to lock an already-locked dir异常解决方法

    有时候因网络太慢或中断 就会出现这种锁定状态 Attempted to lock an already-locked dir svn: Working copy 'D:\MyEclipse\mypro ...