首頁 > web前端 > js教程 > jquery中checkbox全選失效的解決方法_jquery

jquery中checkbox全選失效的解決方法_jquery

WBOY
發布: 2016-05-16 16:24:11
原創
912 人瀏覽過

如果你使用jQuery 1.6 ,代碼if ( $(elem).attr(“checked”) ),將獲得一個屬性(attribute) ,它不會改變該複選框被選中和選中。它只是用來儲存預設或選取屬性的初始值。為了保持向後相容,.attr() 方法從 jQuery 1.6.1 開始除了傳回屬性值外,還會更新 property 屬性,因此 boolean attribute(布林屬性)不需要透過 .prop() 來改變其值。推薦使用上述方法之一,來取得 checked 的值。

使用jQuery的attr方法取得並設定複選框的”checked」屬性,發現第一次全選/取消全選有效,之後就無效了,但查看html來源文件,複選框屬性確實已經被更新了,就是頁面中沒有更新,正確的方法如下:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script type="text/javascript">// <![CDATA[
$(function(){
$('.ckAll').click(function(){
$(".box-items").each(function(){
  $(this).prop("checked",!!$(".box-all").prop("checked"));
});
});
});
// ]]></script>
<div><label class="ckAll"><input class="box-all" type="checkbox" /><span>全选</span></label>
<input class="box-items" type="checkbox" />
<input class="box-items" type="checkbox" />
<input class="box-items" type="checkbox" />
<input class="box-items" type="checkbox" />
<input class="box-items" type="checkbox" />
</div>
登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板