用过音乐播放器的人都知道有个全选按钮，如果使用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. 记录一次Quartz2D学习(三)

    在(二)内,讲到了几何图形的绘制,这次就讲文本与图片的绘制 3 图片与文本 3.1 文本绘制 - (void)drawRect:(CGRect)rect { NSString * str = @&qu ...

  2. 开启基本数据结构和算法之路--初识Graphviz

    在我的Linux刀耕开荒阶段,就想开始重拾C,利用C实现常用的基本数据结构和算法,而数据结构和算法的掌握的熟练程度正是程序的初学者与职业程序员的分水岭. 那么怎么开启这一段历程呢? 按照软件工程的思想 ...

  3. Linux操作系统主机名(hostname)简介

    http://www.jb51.net/LINUXjishu/10938.html 摘要:本文是关于Linux操作系统主机名(hostname)的文档,对主要配置文件/etc/hosts进行简要的说明 ...

  4. 树莓派3B初始化后一些必须的设置

    接上一篇,SSH已经登录成功(http://www.cnblogs.com/crosys/p/6220108.html) 1.树莓派系统的设置 1.1扩展系统空间 因为内存卡还有很多空间没有分配,第一 ...

  5. 【Linux】AWK入门

    什么是AWK AWK是一种用于处理文本的编程语言工具,一个模式匹配程序.一个典型的示例是将数据转换成格式化的报告. 在命令行输入如下awk命令: awk -F":" '{ prin ...

  6. css实现页面元素居中

    水平居中 对于已知宽度的块级元素实现水平居中只需要设置 margin-left:auto; margin-right:auto; 对于多个块级元素实现水平居中只需要设置 //1 父类{ text-al ...

  7. POJ 2356. Find a multiple 抽屉原理 / 鸽巢原理

    Find a multiple Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7192   Accepted: 3138   ...

  8. STL基础

    vector: 1.头文件#include<vector> 2.声明vector对象,vector<int> vec; 3.尾部插入a:vec.push_back(a); 4. ...

  9. [LeetCode] Intersection of Two Linked Lists 求两个链表的交点

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  10. [LeetCode] Search in Rotated Sorted Array 在旋转有序数组中搜索

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...