<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. 结构类模式（一）：适配器（Adapter）

    定义 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 类适配器模式 使用继承的方式实现没有提供的接口从而达到适配到新系统的需求. ...

  2. Mahout之Canopy Clustering深入理解

    转自:http://www.cnblogs.com/vivounicorn/archive/2011/09/23/2186483.html Mahout学习——Canopy Clustering 聚类 ...

  3. Unity3d：The requested item has been unloaded

    问题描述:System.Xml类库下实例化的对象所有枚举类的值都显示如标题错误解决方案1:查看所在类是否:MonoBehaviour,如果没继承,添加即可.<ignore_js_op> 

  4. Java Zip压缩实现

    最近在自学javaWeb,先复习一下java,把还给老师的东西再找回来(知识如果不用很快就会忘记啊).. 今天看到了zip压缩,决定要整理一下. java将有关zip压缩的内容都封装在java.uti ...

  5. 获取oracle 表字段，表名，以及主键之类等等的信息

    数据库版本号:select * from v$version 数据库名:select * from v$instance 注意: 我在C#项目中查询语句的时候报“ORA-00911: 无效字符” 的错 ...

  6. CORTEX -M3 : Registers in depth

    http://www.zembedded.com/cortex-m3-registers-in-depth/ Thanks for the overwhelm response you show in ...

  7. jQuery Mobile和PhoneGap混合开发

    其实二者并不影响,PhoneGap负责调用系统的接口,jQuery Mobile实现一些网页效果.PhoneGap开发请看上一篇文章,jQuery Mobile开发环境搭建如下:[请先阅读上一篇文章, ...

  8. 【ASP.NET】C# 将HTML中Table导出到Excel（TableToExcel）

    首先,说下应用场景 就是,把页面呈现的Table 导出到Excel中.其中使用的原理是 前台使用ajax调用aspx后台,传递过去参数值,导出.使用的组件是NPOI. 前台调用: <script ...

  9. scu 4436: Easy Math 水题

    4436: Easy Math Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.scu.edu.cn/soj/problem.actio ...

  10. (hdu step 8.1.1)ACboy needs your help again!(STL中栈和队列的基本使用)

    题目: ACboy needs your help again! Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...