<script type="text/javascript">

 $(function(){

     //全选

     $("#CheckedAll").click(function(){

         $('[name=items]:checkbox').attr("checked", this.checked );

     });

     $('[name=items]:checkbox').click(function(){

         //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。

         var $tmp=$('[name=items]:checkbox');

         //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。

         $('#CheckedAll').attr('checked', $tmp.length==$tmp.filter(':checked').length);

     });

     //输出值

     $("#send").click(function(){

        var str="你选中的是：\r\n";

        $('[name=items]:checkbox:checked').each(function(){

            str+=$(this).val()+"\r\n";

        })

        alert(str);

     });

  });

  </script>

</head>

<body>

<form method="post" action="">

    <b>你爱好的运动是?</b><br/>

    <input type="checkbox" id="CheckedAll" />全选/全不选<br/>

    <input type="checkbox" name="items" value="足球"/>足球

    <input type="checkbox" name="items" value="篮球"/>篮球

    <input type="checkbox" name="items" value="羽毛球"/>羽毛球

    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>

    <input type="button" id="send" value="提　交"/>

</form>

</body>

jQuery 复选框全选反选的更多相关文章

  1. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  2. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  3. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  4. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. jQuery 实现复选框全选、反选及获取选中的值

    实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...

  6. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  9. jQuery中的几个案例：隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  10. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

随机推荐

  1. html加强

    <html> <head><title>hello</title></head> <body> <p>段落</ ...

  2. BZOJ1185 : [HNOI2007]最小矩形覆盖

    求出凸包后,矩形的一条边一定与凸包的某条边重合. 枚举每条边,求出离它最远的点和离它最左最右的点,因为那三个点是单调变化的,所以复杂度为$O(n)$. 注意精度. #include<cstdio ...

  3. css3 flex流动自适应响应式布局样式类

    1.再说css3 flex 一旦一个容器赋予了display:flex属性,将会有以下特点: 项目无法设置浮动. 列表的样式会被清除. 无法使用vertical-align设置垂直对齐方式. 目前互联 ...

  4. C#泛类型链表的实现

    使用泛型LinkedList<T>类.下面的方法创建了一个LinkedList<T>类,并往链表对象中添加节点,然后使用了几种方法从链表节点中获得信息.       publi ...

  5. Linux压力测试工具

    1 http_load:http://www.oschina.net/p/http_load 命令行输入man http_load 或者 http_load -h可以看到工具的使用方式: 参数说明: ...

  6. Marching Cube

    GPU-Marching-Cubes An Implementation of the Marching Cubes[1] Algorithm Marching Cubes Matlab The St ...

  7. Android消息处理机制

    Android消息处理机制 Android应用程序消息处理机制(深入到native,实际由管道实现-pipe&epoll)

  8. Linux下的mongodb分片部署

    前提: 分片服务器不设置从服务和均衡服务,只有主服务器;当前测试为所有服务器均在同一台物理机上. 1.测试环境:192.168.1.55. 2.测试模式:单机.3.服务:分片服务器1:192.168. ...

  9. Linux 计划任务 Crontab 笔记与总结（2）Crontab 的基本组成与配置

    [Crontab 的基本组成] ① 系统服务 CROND:每分钟都会从配置文件刷新定时任务 ② 配置文件 :文件方式设置定时任务 ③ 配置工具 crontab:用途调整定时任务 [配置文件的配置文件格 ...

  10. Web 在线文件管理器学习笔记与总结（19）上传文件

    dir.func.php 中添加方法: /* 上传文件 */ function uploadFile($fileInfo,$path,$allowExt = array('jpg','jpeg','p ...