用过音乐播放器的人都知道有个全选按钮，如果使用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. Centos7安装完毕后无法联网的解决方法

    /etc/sysconfig/network-scripts/ 用ls命令查看网卡配置文件名(在CENTOS7中网卡名貌似变成了随机数字,所以每台机器的网卡名并不相同)

  2. 0038 Java学习笔记-多线程-传统线程间通信、Condition、阻塞队列、《疯狂Java讲义 第三版》进程间通信示例代码存在的一个问题

    调用同步锁的wait().notify().notifyAll()进行线程通信 看这个经典的存取款问题,要求两个线程存款,两个线程取款,账户里有余额的时候只能取款,没余额的时候只能存款,存取款金额相同 ...

  3. Memcached初探

    一.Memcached是什么 Memcached是由Danga Interactive开发的,高性能的,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度. Memcached基于 ...

  4. HTML中使图片居中显示

    注:imageId为图片id<style type="text/css"> #imageId{ display:block; position:relative; ma ...

  5. shell 脚本之 shell 练习题汇总

    整理了一些 shell 相关的练习题,记录到这里. 1. 请按照这样的日期格式 xxxx-xx-xx 每日生成一个文件,例如:今天生成的文件为 2013-09-23.log, 并且把磁盘的使用情况写到 ...

  6. mdadm设定RAID磁盘阵列，且当分区故障后如何重建

    首先,fdisk建立不同分区,且设为fd格式 其次, mdadm -C md0 -a yes -l -n /dev/sda1 /dev/sdb1 /dev/sdc1 /dev/sdd1 /dev/sd ...

  7. Junit mockito 测试Controller层方法有Pageable异常

    1.问题 在使用MockMVC+Mockito模拟Service层返回的时候,当我们在Controller层中参数方法调用有Pageable对象的时候,我们会发现,我们没办法生成一个Pageable的 ...

  8. [LeetCode] Elimination Game 淘汰游戏

    There is a list of sorted integers from 1 to n. Starting from left to right, remove the first number ...

  9. SQL Server数据库设计规范

    数据库设计规范 1.简介 数据库设计是指对一个给定的应用环境,构造最优的数据库模式,建立数据库及其他应用系统,使之能有效地存储数据,满足各种用户的需求.数据库设计过程中命名规范很是重要,命名规范合理的 ...

  10. 在html中添加script脚本的方法和注意事项

    在html中添加script脚本有两种方法,直接将javascript代码添加到html中与添加外部js文件,这两种方法都比较常用,大家可以根据自己需要自由选择 在html中添加<script& ...