<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. arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])

    测试方法 function test(){ var arr = [0,1,2,3]; arr.splice(1,1,'a');//case console.dir(arr); } case1: arr ...

  2. c#学习之旅------01

    一.交换两个数的值 //交换两个数的值 #region 方法一 , num2 = ;//待交换的两个数值 int temp;//临时变量 temp = num1; num1 = num2; num2 ...

  3. 【转】google推出的SwipeRefreshLayout下拉刷新用法

    SwipeRefreshLayout是Google在support v4 19.1版本的library更新的一个下拉刷新组件,实现刷新效果更方便. 使用如下: 1.先下载android-support ...

  4. ASP.NET|跳转（redirect）到其它站点，提示：当前线程终止。

    在XAF中,如果使用HttpContext.Response.Redirect()进行跳转,会出现”当前线程终止“的报错,跳转失败. 这时候,应该改用WebApplication.Redirect() ...

  5. MySQL 日期时间

    NOW()函数以`'YYYY-MM-DD HH:MM:SS'返回当前的日期时间,可以直接存到DATETIME字段中.CURDATE()以’YYYY-MM-DD’的格式返回今天的日期,可以直接存到DAT ...

  6. win10的安装、win10启动盘制作

    需要的材料 win10映像 U盘 UltraISO软件 1.下载对应的win10映像 有64位和32位可选(自己找地方下) 2.下载UltraISO软件 3.准备一只U盘,插入电脑 4.启动Ultra ...

  7. System.Data.SQLite数据库简介

    SQLite介绍 在介绍System.Data.SQLite之前需要介绍一下SQLite,SQLite是一个类似于Access的单机版数据库管理系统,它将所有数据库的定义(包括定义.表.索引和数据本身 ...

  8. IE兼容CSS3圆角border-radius的方法（同时兼容box-shadow，text-shadow）

    IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法 1.下载ie-css3.htc 2.CSS box { -moz-border-radius: 15 ...

  9. Java多线程技术学习笔记（二）

    目录: 线程间的通信示例 等待唤醒机制 等待唤醒机制的优化 线程间通信经典问题:多生产者多消费者问题 多生产多消费问题的解决 JDK1.5之后的新加锁方式 多生产多消费问题的新解决办法 sleep和w ...

  10. 10 个实用的 jQuery 表单操作代码片段

    jQuery 绝对是一个伟大的开源JavaScript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,在今天这篇代码片段分享文章中, ...