用过音乐播放器的人都知道有个全选按钮，如果使用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. WinSetupFromUSB - 制作多系统U盘安装All-In-One的利器

    单U盘玩多个操作系统,这下有福了! 官网最新的下载地址:http://www.winsetupfromusb.com/files/download-info/winsetupfromusb-1-7-e ...

  2. SQL server学习

    慕课网sql server学习 数据库第一印象:desktop--web server--database server** 几大数据库:sql server.oracle database.DB2. ...

  3. mongo 查询总结

    db.users.find() select * from users db.users.find({"age" : 27}) select * from users where ...

  4. EZchip将推全球首款100核64位ARM A-53芯片

    EZchip将推全球首款100核64位ARM A-53芯片 2015-02-25 16:32:03   来源:互联网    关键字: 将推  全球  64位  arm EZchip日前表示,将准备开发 ...

  5. HDU 1564 Play a game（巴什博弈）

    New Year is Coming! ailyanlu is very happy today! and he is playing a chessboard game with 8600. The ...

  6. NodeJS使用formidable实现文件上传

    最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实 ...

  7. [LeetCode] Smallest Rectangle Enclosing Black Pixels 包含黑像素的最小矩阵

    An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. The black ...

  8. 【WPF】WPF 布局

    1.window 类继承自 ContentControl 所以内部只能有一个元素2.遵循原则:            不应显示的设置元素(控件)尺寸,可以通过设置最大最小尺寸来限制大小         ...

  9. 记录PHP的超全局变量$_SERVER

    $_SERVER是PHP中十分实用的超全局变量,在开发可移植的网站的时候会变得很有用. 下面我记录一下我自己常用到的几个变量 1.$_SERVER['SERVER_NAME']:记录了网站的域名. 2 ...

  10. Quartz定时任务

    spring多个定时任务quartz配置 例子1: biz-quartz-context.xml配置 <?xml version="1.0" encoding="U ...