<!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. mysql存储过程及常用函数

    原文:mysql存储过程及常用函数 一.函数 1.数学函数 CEIL()进一取整 SELECT CEIL(1.2);2 FLOOR()舍一取整 SELECT FLOOR(1.9);9 MOD取余数(取 ...

  2. 【转】百度API获取城市名地名(附源码)

    在做一个软件时,用到了定位功能.网上有很多关于google 的GPS定位,但网上关于google定位都没有用, 搜索下原因:(这里建议大家在中国就尽量不使用系统自带的定位) 因为Google的服务器不 ...

  3. Oracle的SOME,ANY和ALL操作

    平时很少用的这几个操作,今天遇到了.于是又看了一下文档. SOME和ANY一样,是比较宽松的,类似于OR.满足其中任何一个都可以. ALL要求严格一些,类似于AND,必须全部满足才可以. 不能单独使用 ...

  4. MFC圆角背景移动边角底色毛刺解决方案

    CRect rc; Graphics graphics(pDC->m_hDC); GetClientRect(&rc); CRgn m_rgn; if (m_pBgImage) { gr ...

  5. Hibernate的三种缓存

    一级缓存 hibernate的一级缓存是跟session绑定的,那么一级缓存的生命周期与session的生命周期一致,因此,一级缓存也叫session级缓存或者事务级缓存. 支持一级缓存的方法有: q ...

  6. ASP.NET Identity登录原理 - Claims-based认证和OWIN

    MVC5 - ASP.NET Identity登录原理 - Claims-based认证和OWIN 在Membership系列的最后一篇引入了ASP.NET Identity,看到大家对它还是挺感兴趣 ...

  7. 什么是gulp

    gulp:入门简介   本文是gulp的入门级介绍,主要内容包括什么是gulp,gulp与grunt有什么区别,gulp可以解决grunt存在的哪些问题,以及一个简单的说明例子. 什么是gulp gu ...

  8. exit与_exit

    一.main函数: 先从程序的执行开始谈起,C程序总是从main函数开始执行,当内核执行C程序时(使用了一个exec函数),在调用main函数前先调用一个特殊的启动例程.可执行程序 文件将此启动例程指 ...

  9. windows下搭建Cygwin环境

    windows下搭建Cygwin环境 在上一篇博文<Android学习——windows下搭建NDK_r9环境>中,我们详细的讲解了在windows下进行Android NDK开发环境的配 ...

  10. CSLA .NET是一个.NET软件开发框架

    CSLA .NET是一个.NET软件开发框架,帮助开发者“为Windows.Web.面向服务和工作流等应用构建强大和可维护的业务逻辑层”. CSLA是Component-based, Scalable ...