<!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 gps开发必备资料(含测试demo下载)

    入门资料参考: How accurate is Android GPS? Part 1: Understanding Location Data How accurate is Android GPS ...

  2. des和Rijndael加密

    ------------IV的作用: 为了保证数据的安全,.NET基类库中提供的私钥算法类使用称作密码块链(CBC,Cipher Block Chaining)的链模式,算法使用一个密钥和一个初始化向 ...

  3. iOS基础 - 瀑布流

    一.瀑布流简介 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pint ...

  4. 2 MySQL安装

    目录: 1. mysql安装简介2. 下载AppServ3. 安装AppServ4. 使用phpmyadmin连接MySQL5. 使用MySQL Command Line Client 连接MySQL ...

  5. c# 发送Email的2中方式

    先来第一种 // 版权所有 ZhuoYue Co.,Ltd 卓越一通秘密信息 // 文件名称:MyEmailByCDO.cs // 作 者:huangzh // 创建日期:2015-08-20 16: ...

  6. DirectX And Com

    Windows游戏编程读书笔记(5)——初识DirectX和COM 一.COM 1.什么是COM对象 一个COM对象事实上是一个或一套实现了大量接口的C++类 2.COM的优点 不用重新编译你的程序就 ...

  7. FAQ：仓储实现为什么在基础设施层？

    FAQ:仓储实现为什么在基础设施层? 目录 问答部分参考文章 问答部分返回目录 问: 仓储实现为什么在基础设施层? 答: 领域模型包含三种元素:实体.值对象和服务,这三种元素都可以以某种形式使用仓储, ...

  8. C#HTTP代理的实现之注册表实现

    HTTP代理的实现形式,可以通过修改注册表项,然后启动浏览器来实现,也可以通过SOCKET通信,构造HTTP头实现.下面是关于注册表实现的方式. 注册表实现,只需要修改几个关键的注册表项就可以了. 第 ...

  9. 运用Unity结合PolicyInjection实现拦截器

    运用Unity结合PolicyInjection实现拦截器[结合操作日志实例] 上一篇文章我们通过Unity自身Unity.InterceptionExtension.IInterceptionBeh ...

  10. 支持异步同步的分布式CommandBus MSMQ实现

    支持异步同步的分布式CommandBus MSMQ实现 先上一张本文所描述的适用场景图 分布式场景,共3台server: 前端Server Order App Server Warehouse App ...