當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

jquery全选,取消全选

發布時間：2023/10/11 综合教程 111 老码农

生活随笔收集整理的這篇文章主要介紹了 jquery全选,取消全选小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

近期項目又用到了這個全選和取消全選的操作.

曾經總是自己寫純JS.如今既然知道怎么寫了.那怎樣用JQ寫得更簡潔呢.這樣也能學到新的東西.假設乎百度一下果然發現了好東東.感謝OSC的iuhoay.

代碼例如以下:

[javascript] view
plain copy

<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>

[html] view
plain copy

<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

為什么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()的使用：

但有下面三點。須要注意（摘自黑暗運行緒）：

$(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全选,取消全选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： byte[]，bitmap，drawab
下一篇： windows中检查端口占用