<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. ZOJ 3603 DP LCS

    已经5年没有做OJ了, 曾经沧海难为水,除去巫山不是云" 准备每周刷1-2题! 题目大意:给出N个字符串,且各个字符串都包含唯一的字母,即不存在"ABCA"(A重复了), ...

  2. Win7系统删除微软拼音

    微软拼音会在使用Office时偷偷的安装,都找不到删除的地方.在网上找了很多方法都不灵光,最后用下面的方法成功删除.   在语言设置窗口里,重新添加一次这个输入法,确定保存,然后再删除,就行了. 这个 ...

  3. topcoder SRM 593 DIV2 WolfDelaymaster

    #include <iostream> #include <string> #include <algorithm> using namespace std; cl ...

  4. CSS中zoom:1的作用 ，小标签大作用

    CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...

  5. .net 开发的奇淫巧计

    随机数 Random random = new Random(( int)DateTime .Now.Ticks & 0x0000FFFF); 如何让ASP.NET Web API显示完整的错 ...

  6. 对于默认 Windows NT 安装的 SID 值

    https://support.microsoft.com/en-us/kb/163846/zh-cn

  7. 戴尔PowerEdge服务器命名规则和型号分类

    从第十代服务器开始,戴尔重新规范了服务器的名字,以现在的第十二代主流PowerEdge R620服务器为例: 第一位是字母,R代表机架式服务器,其它有: R:Rack,机架式服务器 T:Tower,塔 ...

  8. 【新产品发布】《GM1001 4~20mA 高精度电流采集模块》

    一.主要特性 1.测量精度高达±0.01%FS±0.002mA: 2.采样电阻仅10欧姆(20mA时压降仅0.2V),对被测系统影响  微乎其微: 3.差分输入,可测量正反电流无需改动硬件,使用方便: ...

  9. 【转】SQLServer内部原理

    原文地址:http://twb.iteye.com/blog/182083 在讲SQLSERVER内部原理的之前,我觉得非常有必要向大家介绍一下SQLSERVER的历史. 让我们站在1999年,看看计 ...

  10. PHP OO 编程笔记

    1. 类中的方法不是全局方法,可以和外部的普通方法重名,例如: <?php function time(); 则会报错:不能重新声明方法 Fatal error: Cannot redeclar ...