<!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. Android在包名称更改项目

    通常时引起包名称的变化R文件错误,有时原因不明Manifest混乱多个文本文件. 所以,我们现在感到最简单方便的包名称变更流程文件,如以下: 如果程序包命名com.pepper.util,我们将更改包 ...

  2. 如何使用SetTimer MFC 不够具体

    转会:http://blog.csdn.net/ellor/article/details/1714741 Timer事件,即定时器事件,是在游戏编程中.常常使用的一个事件.借助它能够产生定时运行动作 ...

  3. OAuth简介及sina微博开放平台

     OAuth简介及sina微博开放平台 2010-10-26 13:15:25 标签:新浪 sina 微博 OAuth 开放平台 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者 ...

  4. 推送之HelloWorld及个推Smart Push

    最近有个朋友想要推送一些消息到自己的APP上,自己用了HTTP轮询的方式比较耗电,也比较占用流量,一旦用户关闭了进程,消息则很难触达,于是,咨询我有没有什么好的解决方案.我告诉他其实可以使用推送,他瞪 ...

  5. Introducing ASP.NET vNext and MVC 6

    [译]Introducing ASP.NET vNext and MVC 6 原文:http://www.infoq.com/news/2014/05/ASP.NET-vNext?utm_source ...

  6. 如何在C++ Builder中使用OpenGL

    作者:太乙散数 摘要:用一个简单的例子,阐述了bcb中使用opengl的简单方法,包括初始化框架.旋转和平移图形.清除图像.初始化背景色以及在刷新时保持图像. 关键词:bcb6 opengl 旋转 清 ...

  7. 基于A2DFramework的事件机制实现

    随笔- 102  文章- 3  评论- 476  发布订阅 - 基于A2DFramework的事件机制实现   SUMMARY 能做什么 DEMO 原理图 应用场景 能做什么 A2DFramework ...

  8. springmvc3.1.1+hibernate4

    上篇介绍了基本的配置,这篇着重介绍与hibernate4整合. 1.web.xml文件中加入spring-hibernate的配置.新的web.xml文件内容如下: <?xml version= ...

  9. 测试驱动 ASP.NET MVC Type Aliase

    Type Aliase 去掉Scala的糖衣(4) -- Type Aliase 我的新博客地址:http://cuipengfei.me/blog/2013/12/23/desugar-scala- ...

  10. 10.26最后的模拟DAY2 改造二叉树[中序遍历+严格递增的最长不下降子序列]

    改造二叉树 [题目描述] 小Y在学树论时看到了有关二叉树的介绍:在计算机科学中,二叉树是每个结点最多有两个子结点的有序树.通常子结点被称作“左孩子”和“右孩子”.二叉树被用作二叉搜索树和二叉堆.随后他 ...