想通过JQuery来check或者uncheck页面上的checkbox控件,我们可能会想到用下面的代码:

$('#chk-all').on('click', function(){
var checked = $(this).is(':checked');
$("input[type='checkbox'][name='chk-att']").attr('checked', checked);
});

  chk-all是一个checkbox控件,我们想通过点击它来实现全选或取消全选的功能。在onclick事件中,首先通过$(this).is(':checked')来获取该checkbox当前的选中状态,然后将页面上所有name='chk-att'的checkbox控件选中或取消选中。这里使用的方法是修改checked属性的值,然而该方法并不总是奏效,有时你会看到元素的属性值确实被修改了,但是选中状态并未改变。尝试将attr()方法改成removeAttr()来实现取消选中,仍然不起作用!

  解决办法是使用prop()函数来替代上面代码中的attr()函数。将上面的代码修改如下:

$('#chk-all').on('click', function(){
var checked = $(this).is(':checked');
$("input[type='checkbox'][name='chk-att']").prop('checked', checked);
});

JQuery checkbox check/uncheck的更多相关文章

  1. JQuery Checkbox的change事件

    JQuery   Checkbox的change事件  参考 http://blog.csdn.net/hbhgjiangkun/article/details/8126981   $(functio ...

  2. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

  3. jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  4. jquery checkbox 选中 全选 插件

    checkbox  选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...

  5. jquery checkbox相关 prop方法

    jquery checkbox相关 prop方法 firefox中 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因复选框绑定了click事件 ...

  6. jquery checkbox选择器 语法

    jquery checkbox选择器 语法 作用::checkbox 选择器选取类型为 checkbox 的 <input> 元素.大理石平台价格表 语法:$(":checkbo ...

  7. jquery checkbox 实现单选

    最近在用javascript的时候发现网上实现checkbox单选的代码都已经过时了. 用着几年前的代码发现根本不行了 原因是jquery api已经更改 http://api.jquery.com/ ...

  8. jquery checkbox实例

    <!DOCTYPE html><html> <head><meta charset="utf-8" /><title>& ...

  9. jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

    1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...

随机推荐

  1. jsp中文件上床的enctype="multipart/form-data"用法

    jsp表单中必须要有enctype="multipart/form-data"才能文件上传的意思,是设置表单的MIME编码.默认情况,这个编码格式是application/x-ww ...

  2. Git 教程

    Git 教程 新建 模板 小书匠 欢迎使用 小书匠(xiaoshujiang)编辑器,您可以通过设置里的修改模板来改变新建文章的内容. Git使用 Git - 关于版本控制 TortoiseGit日常 ...

  3. 等比例压缩图片到指定的KB大小

    基本原理: 取原来的图片,长宽乘以比例,重新生成一张图片,获取这张图片的大小,如果还是超过预期大小,继续在此基础上乘以压缩比例,生成图片,直到达到预期 /** * @获取远程图片的体积大小 单位byt ...

  4. js获取div相对屏幕的坐标位置

    1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...

  5. 使用Topshelf快速搭建Windows服务

    1.创建控制台程序 2.安装Topshelf组件  Install-Package Topshelf using System; using System.Timers; using Topshelf ...

  6. py2exe 打包scipy时遇到的问题

    最近写了个小程序,用PyQt5做的界面,写完之后用py2exe打包成独立的exe文件,运行正常. 后来由于需要,调用SciPy.io.loadmat,改写setup.py,打包之后运行错误,提示: T ...

  7. Java读取文件的几种方式

    package com.mesopotamia.test; import java.io.BufferedReader; import java.io.ByteArrayInputStream; im ...

  8. allegro中焊盘的设置

    用Cadence的pad designer制作pad的时候会遇到为thermal relief和anti pad设计尺寸的问题 Thermal relief:正规的中文翻译应该叫做防散热PAD.它主要 ...

  9. Merge在Sqlserver使用例子说明

    ---文章 MatchInt的方式 Create table SourceTable([ID] int,[Desc] varchar(50)); Create table TargetTable([I ...

  10. React Native填坑之旅--与Native通信之iOS篇

    终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...