用过音乐播放器的人都知道有个全选按钮，如果使用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. 在本机搭建SVN服务器

    目的:在没有正式的SVN服务器的情况下,完成代码的本地备份. 参考:http://blog.csdn.net/ladofwind/article/details/2100200 以下是具体内容: 如何 ...

  2. Linux基础练习题(三)

    1.显示当前系统上root.fedora或user1用户的默认shell: [root@www ~]# egrep "^(root|fedora|user1)" /etc/pass ...

  3. 大数据慎行，数据管理要落实到KPI

    近年来,"大数据"一词被IT和互联网行业广泛提及,但真正落到实处的案例没有多少,大数据量支撑.数据挖掘技术.非结构化数据是阻碍的主要原因.大多数企业的信息化并没有达到到成熟水平,关 ...

  4. (转)Java：类与继承

    原文地址: http://www.cnblogs.com/dolphin0520/p/3803432.html 对于面向对象的程序设计语言来说,类毫无疑问是其最重要的基础.抽象.封装.继承.多态这四大 ...

  5. (转)Java中的static关键字解析

    转载: http://www.cnblogs.com/dolphin0520/p/3799052.html 一.static关键字的用途 在<Java编程思想>P86页有这样一段话: &q ...

  6. app开发项目简单的结构一

    一 .Network (网络) 1. 接口类(可以一个放所有接口的头文件)ApiConfig.h. (1). 可以放服务器的地址.图片服务器的地址及其它接口的地址(这样做的好处是只用导入一个头文件即可 ...

  7. mac上设置新版chrome浏览器跨域

    设置方法 打开一个新的可跨域的chrome窗口实现方法: 1. 打开终端 2. 输入下面的命令( 需要替换路径中的yourname ) open -n /Applications/Google\ Ch ...

  8. C++基本数据类型总结

    一.整形 1.整形有char.short.int.long.long long,这5个也默认为signed XX ; 规则:short至少16位:int至少和short一样:long至少32位,且至少 ...

  9. [LeetCode] Combination Sum II 组合之和之二

    Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...

  10. 如何用卷积神经网络CNN识别手写数字集？

    前几天用CNN识别手写数字集,后来看到kaggle上有一个比赛是识别手写数字集的,已经进行了一年多了,目前有1179个有效提交,最高的是100%,我做了一下,用keras做的,一开始用最简单的MLP, ...