使用jQuery设置checkbox的“checked”状态

在跨平台的前端开发中，使用jQuery来操作checkbox的checked状态是一个标准而有效的方法，且允许表单的重提交（repost）。

$('.myCheckBox').each(function () {
  this.checked = true
})

$('.myCheckBox').each(function () {
  this.checked = false
})

通过这种方法，你可以利用JavaScript标准来检查和取消检查checkbox。任何正确实现了checkbox checked属性的浏览器都能无障碍地运行这段代码。理论上，这应该包括所有主要浏览器，但我无法测试Internet Explorer 9之前的版本。

问题（适用于jQuery 1.6）

当用户点击checkbox后，该checkbox不再响应checked属性的改变。

这里是一个例子，显示了在用户点击checkbox后，checked属性无法正常工作的问题（该问题在Chrome中出现）。

在JSFiddle中查看例子

解决方案

通过使用JavaScript的checked属性直接操作DOM元素，我们可以直接解决这个问题，而不需要尝试通过操作DOM来达到我们的目的。

在JSFiddle中查看解决方案

这个插件将改变所有通过jQuery选择的元素的checked属性，并在所有情况下成功检查和取消检查checkbox。因此，虽然这种方法看起来可能有些过于强势，但它会提升你的网站用户体验，并帮助防止用户的挫败感。

;(function ($) {
  $.fn.checked = function (value) {
    if (value === true || value === false) {
      // 设置checkbox的值
      $(this).each(function () {
        this.checked = value
      })
    } else if (value === undefined || value === 'toggle') {
      // 切换checkbox的值
      $(this).each(function () {
        this.checked = !this.checked
      })
    }

    return this
  }
})(jQuery)

另外，如果你不想使用插件，也可以使用以下代码片段：

// 检查
$(':checkbox').prop('checked', true)

// 取消检查
$(':checkbox').prop('checked', false)

// 切换
$(':checkbox').prop('checked', function (i, value) {
  return !value
})

通过上述方法，你可以确保checkbox在所有情况下都能正确响应并执行相应的操作，从而提高代码的可靠性和用户体验。