近期项目又用到了这个全选和取消全选的操作.

曾经总是自己写纯JS.如今既然知道怎么写了.那怎样用JQ写得更简洁呢.这样也能学到新的东西.假设乎百度一下果然发现了好东东.感谢OSC的iuhoay.

代码例如以下:

[javascript] view
plain
copy

  1. <script type="text/javascript" src="/web/bzz_index/password/js/jquery-1.7.1.min.js"></script>
  2. <script language="JavaScript">
  3. $(function() {
  4. $("#ckAll").click(function() {
  5. $("input[name='sub']").prop("checked", this.checked);
  6. });
  7. $("input[name='sub']").click(function() {
  8. var $subs = $("input[name='sub']");
  9. $("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
  10. });
  11. });
  12. </script>
[html] view
plain
copy

  1. <input type="checkbox" id="ckAll" />check all<br />
  2. <input type="checkbox" name="sub" />1<br />
  3. <input type="checkbox" name="sub"/>2<br />
  4. <input type="checkbox" name="sub"/>3<br />
  5. <input type="checkbox" name="sub"/>4<br />

必须说的是JQ1.6+以上才支持prop哦.关于prop能够看看以下这个.

今天在用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候能够取到值,值为"checked"但没选中获取值就是undefined.

解决这个文章我參考了这个帖子:

http://bugs.jquery.com/ticket/9812

为什么jquery 1.6+添加了.prop()方法,由于在有些浏览器中比方说仅仅要写disabled,checked就能够了。而有的要写成disabled = "disabled"。checked="checked"。

所以。从1.6開始,jq提供新的方法“prop”来获取这些属性。

曾经我们使用attr获取checked属性时返回"checked"和"",如今使用prop方法获取属性则统一返回true和false。

那么,什么时候使用attr。什么时候使用prop??
1.加入属性名称该属性就会生效应该使用prop.
2.是有true,false两个属性使用prop.
3.其它则使用attr
项目中jquery升级的时候大家要注意这点!

下面是官方建议attr(),prop()的使用:

但有下面三点。须要注意(摘自黑暗运行绪):

  1. $(window).attr(), $(document).attr()建议改为$(windows).prop(), $(document).prop()。由于window及document理论上无从加上HTML Attribute。尽管jQuery 1.6.1在内部会偷偷改用.prop()。毕竟语意不合逻辑。应该避免。
  2. 在HTML语法<input type=”checkbox” checked=”checked” />中。checked Attribute仅仅会在一開始将checked Property设成true,兴许的状态变更及储存都是透过checked Property。

    换句话说。checked Attribute仅仅影响初值,之后应以checked Property为准。

    基于这个理由,$(“:checkbox”).prop(“checked”, true)会比$(“:checkbox”).attr(“checked”,
    true)来得合理。尽管jQuery 1.6.1已让$(“:checkbox”).attr(“checked”, true)也具有变更checked
    Property的能力,但prop()确实比attr()写法更吻合背后的实际运作。

  3. 适用此点的Boolean属性包括了: autofocus, autoplay, async, checked, controls, defer, disabled, hidden, loop, multiple, open, readonly, required, scoped, selected

jQuery Team提供一张DOM元素属性适用attr()/prop()的对比表:

Attribute/Property .attr() .prop()
accesskey  
align  
async
autofocus
checked
class  
contenteditable  
defaultValue  
draggable  
href  
id  
label  
location *
multiple
nodeName  
nodeType  
readOnly
rel  
selected
selectedIndex  
src  
style  
tabindex  
tagName  
title  
type  
width **

jquery全选,取消全选的更多相关文章

  1. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  2. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  3. jQuery--checkbox全选/取消全选

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...

  4. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  5. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  6. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  7. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  8. Vue 全选/取消全选,反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  9. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

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

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

随机推荐

  1. SQL Server 2008 阻止保存要求重新创建表的更改

    取消[阻止保存要求重新创建表的更改]复选框

  2. JS简单实现防抖和节流

    一.什么是防抖和节流 Ps: 比如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,那得消耗多大的服务器资源,即使你的服务器资源很强大,也不带这么玩的. 1. 防 ...

  3. POJ - 3126 - Prime Path(BFS)

    Prime Path POJ - 3126 题意: 给出两个四位素数 a , b.然后从a开始,每次可以改变四位中的一位数字,变成 c,c 可以接着变,直到变成b为止.要求 c 必须是素数.求变换次数 ...

  4. [模板] LIS

    树状数组优化LIS到nlogn,网上找了好多,感觉讲得都不是很明白,正好自己复习整理一下. 基本的DP方程 f[i]=max(f[i],f[j]+1) (j<i且a[j]<a[i]) 定义 ...

  5. 关于Servlet一些东西

    ---- 概念 Servlet是一种服务器端的Java应用程序,具有独立于平台和协议的特性,可以生成动态的Web页面. 它担当客户请求(Web浏览器或其他HTTP客户程序)与服务器响应(HTTP服务器 ...

  6. Centos 7 编译php 7.2.10

    步骤一:安装依赖 yum install -y wget gcc gcc-c++ gd-devel zlib-devel libjpeg-devel libpng-devel libiconv-dev ...

  7. c++_最大公共子串

    标题:最大公共子串 最大公共子串长度问题就是:求两个串的所有子串中能够匹配上的最大长度是多少. 比如:"abcdkkk" 和 "baabcdadabc",可以找 ...

  8. python基础002

    1.pycharm安装与添加解释器 专业版.英文界面,不要汉化—一定要尊重知识产权 算术运算符:+ - * / // % ** ^ 布尔运算符:== > < >= <= 逻辑运 ...

  9. LeetCoce 413. Arithmetic Slices

    A sequence of number is called arithmetic if it consists of at least three elements and if the diffe ...

  10. 数据结构实验4:C++实现循环队列

    实验4 4.1 实验目的 熟练掌握队列的顺序存储结构和链式存储结构. 熟练掌握队列的有关算法设计,并在循环顺序队列和链队列上实现. 根据具体给定的需求,合理设计并实现相关结构和算法. 4.2 实验要求 ...