<html>

<head>

　　<script src="jquery-1.11.1.min.js" type="text/javascript"></script>

</head>

<body>

　　<input type="checkbox" name="chk_list[]" value="1" />1

　　<input type="checkbox" name="chk_list[]" value="2" />2

　　<input type="checkbox" name="chk_list[]" value="3" />3

　　<input type="checkbox" name="chk_list[]" value="4" />4

　　<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选

<script type="text/javascript">

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

    　　// 使用attr只能执行一次

    　　$("input[name='chk_list[]']").attr("checked", $(this).attr("checked")); 

    　　// 使用prop则完美实现全选和反选

    　　$("input[name='chk_list[]']").prop("checked", $(this).prop("checked"));

　　　　// 获取所有选中的项并把选中项的文本组成一个字符串
    　　var str = '';
    　　$($("input[name='chk_list[]']:checked")).each(function(){
        　　str += $(this).next().text() + ',';
    　　});
    　　alert(str);

　　});

</script>

</body>

</html>

总结：

  • 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
  • 参考 http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html

jQuery全选与反选，且解决点击只执行一次的问题的更多相关文章

  1. Jquery全选与反选checkbox（代码示例）

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

  2. Jquery 全选、反选问题解析

    最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...

  3. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

    好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...

  4. jQuery 全选和反选demo

    前段时间做了一个全选和反选的功能,最近不忙了,做了一个简化版的demo. 全部代码如下: <!DOCTYPE html> <html> <head> <tit ...

  5. Jquery 全选、反选

    jQuery 1.9以后用 prop(); 不用attr 等 $(function() { $('#inputCheck').click(function() { $("input[name ...

  6. jQuery全选、反选、全不选

    原文链接:https://yq.aliyun.com/articles/33443 HTML内容部分: <ul id="items"> <li> <l ...

  7. jQuery 全选 正反选

    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript&quo ...

  8. 基于jquery 全选、反选、各行换色、单击行选中事件实现代码

    <script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...

  9. Jquery 全选、反选问题的记录

    <div id="list"> <ul id="choseList" > <li><input type=" ...

随机推荐

  1. thinkphp 定位查询 Model:last您所请求的方法不存在!

    thinkphp 定位查询 Model:last您所请求的方法不存在!   用thinkphp3.1做项目的时候为了获取记录表中最后一个id用到了last()方法,出现了这个错误:Model:last ...

  2. Linux内核完全注释之编程语言和环境（一）

    as86汇编器 1.来源与对于linux的用途 as86来源minix-386开发的intel 8086.80386汇编编译程序和链接程序,他主要为linux创建16位的启动引导扇区程序boot/bo ...

  3. Plan04.学习与提升

    虽然工作没有继续做自己最喜欢的Android的开发,对于自己来说,从事J2EE又是一种挑战,自己 可以学习更多的东西,开阔自己的眼界,而不是局限在Android的应用开发领域. 工作这段时间,自己学到 ...

  4. Linux下安装Android Studio (Centos 7)

    首先去下载一个android studio的包. http://www.android-studio.org/ (友情一个) http://www.cnblogs.com/gssl/p/4963668 ...

  5. 关于mysql函数GROUP_CONCAT

    GROUP_CONCAT()是MySQL数据库提供的一个函数,通常跟GROUP BY一起用,具体可参考MySQL官方文挡:http://dev.mysql.com/doc/refman/5.0/en/ ...

  6. arp:地址解析协议（Address Resolution Protocol）(来自维基百科)

    地址解析协议（Address Resolution Protocol），其基本功能为通过目标设备的IP地址，查询目标设备的MAC地址，以保证通信的顺利进行。它是IPv4中网络层必不可少的协议，不过在I ...

  7. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  8. Codeforces Round #338 (Div. 2) A. Bulbs 水题

    A. Bulbs 题目连接: http://www.codeforces.com/contest/615/problem/A Description Vasya wants to turn on Ch ...

  9. Java IO之File

    FILE类是用来实现获取文件.文件夹的类库工具,File并不是像类名所表示的那样仅仅是用来表示文件.它还能够用来表示文件夹. 所以能够用File来获取一个文件夹下的全部文件,甚至是文件夹中的文件. 一 ...

  10. MySQL CAST与CONVERT 函数的用法

    MySQL CAST与CONVERT 函数的用法 产生另一个类型的值  MySQL 的CAST()和CONVERT()函数可用来获取一个类型的值,并产生另一个类型的值. 两者具体的语法如下:1 CAS ...