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
但有以下三点,需要注意(摘自黑暗执行绪):
- $(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 ** | ? |
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。