jquery全选,取消全选
近期项目又用到了这个全选和取消全选的操作.
曾经总是自己写纯JS.如今既然知道怎么写了.那怎样用JQ写得更简洁呢.这样也能学到新的东西.假设乎百度一下果然发现了好东东.感谢OSC的iuhoay.
代码例如以下:
- <script type="text/javascript" src="/web/bzz_index/password/js/jquery-1.7.1.min.js"></script>
- <script language="JavaScript">
- $(function() {
- $("#ckAll").click(function() {
- $("input[name='sub']").prop("checked", this.checked);
- });
- $("input[name='sub']").click(function() {
- var $subs = $("input[name='sub']");
- $("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
- });
- });
- </script>
- <input type="checkbox" id="ckAll" />check all<br />
- <input type="checkbox" name="sub" />1<br />
- <input type="checkbox" name="sub"/>2<br />
- <input type="checkbox" name="sub"/>3<br />
- <input type="checkbox" name="sub"/>4<br />
必须说的是JQ1.6+以上才支持prop哦.关于prop能够看看以下这个.
今天在用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候能够取到值,值为"checked"但没选中获取值就是undefined.
解决这个文章我參考了这个帖子:
http://bugs.jquery.com/ticket/9812
所以。从1.6開始,jq提供新的方法“prop”来获取这些属性。
但有下面三点。须要注意(摘自黑暗运行绪):
- $(window).attr(), $(document).attr()建议改为$(windows).prop(), $(document).prop()。由于window及document理论上无从加上HTML Attribute。尽管jQuery 1.6.1在内部会偷偷改用.prop()。毕竟语意不合逻辑。应该避免。
- 在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()写法更吻合背后的实际运作。- 适用此点的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全选,取消全选的更多相关文章
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- jQuery--checkbox全选/取消全选
用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...
- html checkbox 实现全选/取消全选
html checkbox 实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...
- 【转载】checkbox实现全选/取消全选
比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...
- AngularJS--购物车全选/取消全选功能实现
刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...
- checkbox全选/取消全选
//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...
- Vue 全选/取消全选,反选/取消反选
这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...
- vue实现功能 单选 取消单选 全选 取消全选
vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...
- jquery checkbox勾选取消勾选的诡异问题
jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form> 你爱好的运动是?<input type=&q ...
随机推荐
- TCP socket编程记录(C语言)
最近使用到TCP的socket编程,记录一下思路. TCP Socket 服务器编程思路 0.初始化套接字库 1.创建套接字----------2个(服务器本身需要一个套接字,客户端要返回一个套接字) ...
- ubuntu中执行docker info出现警告信息WARNING: No memory limit support 或 WARNING: No swap limit support
docker info 指令报若下错误:WARNING: No memory limit support 或WARNING: No swap limit support 解决方法: 1.打开/etc/ ...
- (7) 将tomcat HTTP连接器启动在80端口(jsvc使用详解)
让tomcat在80端口上运行 法一: 修改连接器的端口8080为80 <Connector port="8080" protocol="HTTP/1.1" ...
- 【Mysql数据库】知识点总结
本文转载自:http://www.cnblogs.com/tonghun/p/7191131.html 一 数据库常用操作 mysql -u+username -p+password:登陆数据库管理系 ...
- LeetCode(31) Next Permutation
题目 Implement next permutation, which rearranges numbers into the lexicographically next greater perm ...
- String字符串的遍历
StringTest.java /* * 变量字符串(获取字符串中的每一个字符) */ public class StringTest { public static void main(String ...
- centos7.4下搭建JDK+Tomcat+Nginx+Mysql+redis+Mongodb+maven+Git+Jenkins
先干两件大事!先干两件大事!先干两件大事! 1.关闭selinux [root@mycentos ~]# vi /etc/selinux/config SELINUX=disabled 2.关闭防火墙 ...
- Extjs中获取grid数据
(1)grid.getStore().getRange(0,store.getCount()); //得到grid所有的行 (2)grid.getSelectionModel().getSelecti ...
- 搜狗大数据总监、Polarr 联合创始人关于深度学习的分享交流 | 架构师小组交流会
架构师小组交流会是由国内知名公司技术专家参与的技术交流会,每期选择一个时下最热门的技术话题进行实践经验分享.第一期:来自沪江.滴滴.蘑菇街.扇贝架构师的 Docker 实践分享 第二期:来自滴滴.微博 ...
- 2016阿里校招python研发面试
一面: 面:说说你们学校的主修课程. 学校开的全是尼玛java课,这个我是想了有一会的. 面:看你简历写了会jquery,来问你个简单的jquery问题 :jQuery支不支持css引入. 呵呵 面: ...