2014-07-23

jQuery Checkbox 全選與取消全選

會有這篇筆記,一切都是起因於 jQuery 1.6 做了一些衝動的事:改寫了 attr(...) 的用法,詳情太囉唆,請看以下網址:

jQuery 1.6.1上場救援,不用改寫attr()囉
jQuery 1.6 .attr() 和 .prop()

也就是我習慣用的 attr(...) 變得很奇怪,尤其在控制 checkbox 的勾與不勾時,行為非常詭異,詭異到我不想去了解發生了什麼事。

解法很簡單,改用 prop(...) 就好了。
// 勾選或取消「全選」時,checkbox 的 checked 屬性(prop)跟著 checkboxAll 走就可以
$('.checkboxAll').click(function(){
  $('.checkbox').prop('checked', $('.checkboxAll').prop('checked'));
});
// 單獨勾選或取消 checkbox 時,須同步狀態到 checkboxAll 
$('.checkbox').click(function(){
  var checkedLength = $('.checkbox:checked').length;
  var checkboxLength = $('.checkbox').length;
  $('.checkboxAll').prop('checked', checkedLength == checkboxLength);
});
prop(...) 只會回傳 true 或 false,不會回傳空字串、undefined 或 checked,事情變得簡單多了。
---
---
---

1 則留言: