<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. ZOJ2314 Reactor Cooling（无源汇流量有上下界网络的可行流）

    题目大概说一个核反应堆的冷却系统有n个结点,有m条单向的管子连接它们,管子内流量有上下界的要求,问能否使液体在整个系统中循环流动. 本质上就是求一个无源汇流量有上下界的容量网络的可行流,因为无源汇的容 ...

  2. Converting Stream to String and back…what are we missing?

    string test = "Testing 1-2-3"; // convert string to stream byte[] byteArray = Encoding.ASC ...

  3. Period[HDU1358]

    Period Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  4. BZOJ3495 : PA2010 Riddle

    2-SAT. 建立n个变量,其中第i个变量表示第i个城市是否是首都. 对于边(x,y),连边x->y',y->x'. 对于一个有y个城市的国家,新建2y个变量,分别表示前i个城市和后i个城 ...

  5. HDU 1045 (DFS搜索)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1045 题目大意:在不是X的地方放O,所有O在没有隔板情况下不能对视(横行和数列),问最多可以放多少个 ...

  6. Zepto源码注释

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

  7. CCSpriteBatchNode的优化性能

    当将大量精灵加载到CCLayer时,如果直接利用[self addChild:sprite]去加载,每加载一个精灵,都必须open,draw,close, 而利用 CCSpriteBatchNode去 ...

  8. COJ574 数字序列

    试题描述   霸中智力测试机构的一项工作就是按照一定的规则删除一个序列的数字,得到一个确定的数列.陈思同学很渴望成为霸中智力测试机构的主管,但是他在这个工作上做的并不好,俗话说熟能生巧,他打算做很多练 ...

  9. python基础数据类型

    整形:(不可变类型) >>> a = 123>>> type(a)<class 'int'> 长整形:(在python3中已经废弃了) >> ...

  10. 提示用户升级IE6浏览器的办法

    IE6一直饱受设计者们的诟病,互联网风云变幻十多年,唯一没变的就是这款在当初被微软内置在winxp系统而又火的不行的浏览器.而如今,在日新月异的网络环境下,IE6却让一个原本美观整洁的网页变得满目疮痍 ...