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，事情變得簡單多了。
---
---
---