用过音乐播放器的人都知道有个全选按钮，如果使用Jquery实现，有个直接选中checked标签的方式

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="UTF-8"/>

        <title></title>

    </head>

    <body>

        <input type="checkbox" name="check" id="" value="" />

        <input type="checkbox" name="check" id="" value="" />

        <input type="checkbox" name="check" id="" value="" />

        <input type="checkbox" checked="checked" name="check" id="" value="" />

        <input type="checkbox" checked="false" name="check" id="" value="" />

        <input type="checkbox" name="check" id="" value="" />

        <button class="submit" id="submit">全选</button>

    </body>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/javascript">

        var allLen = $("input[name='check']:checkbox").length;  /* 所有的选项卡的长度 */

        $(".submit").click(function(){

            var checkedLen = $(":checked").length;  /* 已被选中的长度 */

            if (checkedLen < allLen) {

                $("input[name='check']:checkbox").each(function(){

                     $(this).prop("checked", true);

                })

            }else{

                $("input[name='check']:checkbox").each(function(){

                     $(this).prop("checked", false);

                })

            }

        })

    </script>

</html>

但是如果使用JavaScript，就只能遍历判断了。代码如下

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="UTF-8"/>

        <title></title>

    </head>

    <body>

        <input type="checkbox" name="" id="" value="" />

        <input type="checkbox" name="" id="" value="" />

        <input type="checkbox" name="" id="" value="" />

        <input type="checkbox" checked="checked" name="" id="" value="" />

        <input type="checkbox" name="" id="" value="" />

        <input type="checkbox" name="" id="" value="" />

        <button class="submit1" id="submit1">全选</button>

    </body>

    <script type="text/javascript">

        var select1 = document.getElementById("submit1");

        var checkboxs = document.getElementsByTagName("input");

        select1.onclick = function(){

            var num = 0;

            for (k in checkboxs) {

                if(checkboxs[k].checked){

                    num++;

                }

            }

            if (num == checkboxs.length) {

                for (var i = 0;i<checkboxs.length;i++) {

                    checkboxs[i].checked = false;

                }

            }else{

                for (var i = 0;i<checkboxs.length;i++) {

                    checkboxs[i].checked = true;

                }

            }

        }

    </script>

</html>

小知识：Jquery中prop()和attr()相对于checkbox的区别(可见不能用attr()进行checked判断)

代码如下：

<!DOCTYPE HTML>

<html>

    <head>

        <title></title>

    </head>

    <body>

        <input type="checkbox" name="intersting" id="one" checked="checked" value=""/>

        <button id="button">显示prop和attr获取的值</button>

        <p class="prop"></p>

        <p class="attr"></p>

    </body>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/javascript">

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

            $(".prop").html("prop(): "+$("input[name='intersting']").prop('checked'));

            $(".attr").html("attr(): "+$("input[name='intersting']").attr("checked"));

        })

    </script>

</html>

列表中checked全选按钮的实现的更多相关文章

  1. jquery中实现全选按钮

    <html>   <head>   <script type='text/javascript' src='js/jquery-1.5.1.js'></scr ...

  2. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  3. 全选按钮的设定和POST处理当前循环的列表

    以下为全选按钮的代码,通过class实现. //全选按钮 $(function () { $("#selectall").change(function () { var isch ...

  4. checkbox做全选按钮

    1.先写一个html页面,里面写一个全选按钮和几个复选框,实现下面2个要求 (1)点击全选按钮选中时,所有的复选框选中. (2)点击全选按钮取消选中时,所有复选框取消选中. <input typ ...

  5. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  6. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  7. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  8. Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. C#Winform窗体 DataGridView全选按钮的实现方式

    最近,在做CS程序遇到一个头疼的问题,datagridview列表的全选按钮遇到各种问题,做的是自适应窗体大小,当窗体最大化导致全选按钮出现与列表数据不一致,特别不搭配,试了很久,网上也找了好多资料各 ...

随机推荐

  1. 【转】深入浅出JavaScript之闭包（Closure）

    闭包(closure)是掌握Javascript从人门到深入一个非常重要的门槛,它是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.下面写下我的学习笔记~ 闭包-无处不 ...

  2. 一个基于Microsoft Azure、ASP.NET Core和Docker的博客系统

    2008年11月,我在博客园开通了个人帐号,并在博客园发表了自己的第一篇博客.当然,我写博客也不是从2008年才开始的,在更早时候,也在CSDN和系统分析员协会(之后名为“希赛网”)个人空间发布过一些 ...

  3. SQL 数据优化之不建立索引的情况

    索引可以提高数据的检索效率,也可以降低数据库的IO成本,并且索引还可以降低数据库的排序成本.排序分组操作主要消耗的就是CPU资源和内存,所以能够在排序分组操作中好好的利用索引将会极大地降低CPU资源的 ...

  4. 萌新笔记——封装hiredis——C++与redis对接（一）（string的SET与GET操作）

    在菜鸟教程自学了redis,总想着像Mysql一样,在C/C++中进行对接.于是查询了一些资料,最后找到了hiredis.然而直接用它的话,难免有点不方便.于是,对其进行封装. hiredis直接去g ...

  5. 64位下pwntools中dynELF函数的使用

    这几天有同学问我在64位下怎么用这个函数,于是针对同一道题写了个利用dynELF的方法 编译好的程序 http://pan.baidu.com/s/1jImF95O 源码在后面 from pwn im ...

  6. IIS将错误信息发送到浏览器

    本文版权归博客园和dige1993所有,访问作者博客:http://www.cnblogs.com/dige1993 最近又开始玩ASP了,调试的时候出现错误不清楚详细错误信息特别不方便,记得以前可以 ...

  7. 【repost】js 常见错误类型

    1)SyntaxError SyntaxError是解析代码时发生的语法错误 // 变量名错误  var 1a;  // 缺少括号  console.log 'hello'); (2)Referenc ...

  8. 理解SVG的viewport,viewBox,preserveAspectRatio

    万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...

  9. html之select标签

    循环select标签 <select name="group_id"> {% for row in group_list %} <option value={{r ...

  10. 完整部署CentOS7.2+OpenStack+kvm 云平台环境（3）--为虚拟机指定固定ip

    之前在测试环境(centos7.2)上部署了openstack云平台(完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建),openstack在neutron组网 ...