<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. js 控制DIV 预览打印

    Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> ...

  2. Sublime Text3 激活教程

    Sublime Text3激活 在使用Sublime时会定期弹出购买提示框,避免出现购买提示,影响工作效率,我们可以使用网上的激活码,虽然有些不厚道,但是工作以后,一定选择购买正版支持一下. 打开Su ...

  3. cocos2d-x 2.2 资源更新AssetsManager例子代码

    转自:http://www.58player.com/blog-2327-601.html // // UpgradeLayer.h // AmazeDemo // // Created by lsw ...

  4. WP8异常错误：Error HRESULT E_FAIL has been returned from a call to a COM component.

    在做WP8开发的过程中,使用到了longlistselector这个控件,本来使用没有问题. 但是突然出现了一个闪退的错误,错误信息如下: {MS.Internal.WrappedException: ...

  5. Codeforces Round #188 (Div. 2) A. Even Odds 水题

    A. Even Odds Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/318/problem/ ...

  6. 【剑指offer】递归循环两种方式反转链表

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/25737023 本文分别用非递归和递归两种方式实现了链表的反转,在九度OJ上AC. 题目描写 ...

  7. Android上的SQLLite性能分析

    也许有人还不知道,Android 是有一些内建的 类库支持 SQL Lite 数据库的操作.他提供了一个很好的方式在 Android 上组织少量的数据.不管怎样,在使用这些类库的时候有一些陷阱是需要注 ...

  8. 解决Github使用Fastly CDN而导致不能加载网页的方法 转自 沙丘：http://www.enkoo.net/fastly-cdn-in-gifhub.html

    Github现在基本属于“安全”网站,但Github使用fastly.net的CDN服务后,其网站在国内经常不能正常加载网页.github.global.ssl.fastly.net的亚洲IP一般为1 ...

  9. xcode中没有autoSizing的设置

    转自:http://blog.sina.com.cn/s/blog_954bb2f001016oyx.html 学习Xcode的iOS编程时,可能会发现Autosizing Control不见了,其原 ...

  10. JS获取与遍历节点的兄弟父级

    发布:脚本学堂/JavaScript  编辑:JB01   2014-01-23 15:40:11  [大 中 小] 介绍下js获取节点的兄弟.父级与子元素的方法,学习下js遍历节点的操作方法,有需要 ...