北漂一族

      checkbox 默认是可以多选的。但在很多时候，我们会遇到需要对某些数据进行 批量更新 或者 批量上传 之类的操作。 这时候就要用到checkbox的全选和反选功能了。全选， 就是把多个checkbox同时选中； 反选， 就是把多个已被选中的checkbox切换到未选中状态。

     其实实现checkbox的全选和反选功能很简答，下边我们举个简答的例子说明一下：

     首先，用html定义一组checkbox表单， 代码如下：

     <form name=”customizeContentForm”>

     <checkbox name=”blockId” />

     <checkbox name=”blockId” />

     <checkbox name=”blockId” />

     <checkbox name=”blockId” />

     <input type=”button” onclick=”selectAll（true)” value=”全选”/>

     <input type=”button” onclick=”selectAll（false)” value=”反选”/>

     </form>

     这里，我们定义了4个checkbox元素和两个button元素：全选 和 反选。值得注意的是，这里我们对这些checkbox使用了相同的name：blockId. 这是我们做批处理的时候经常用到的，这样做是为了简化前台与后台的处理。 当然，用不同的name也是可以的，不过那样前后台处理就比较麻烦了。既然都可以达到相同的效果，那何不选择简单的呢？是不是？有一句话不是说：简单之美吗？哈哈，所以很多时候，我们不要把简单的问题复杂化，也算是一个程序员的历练吧。

     接下来我们要实现的是，但用户点击 “全选”  按钮的时候，所有checkbox同时被选中。 反之，当用户点击 “反选”  按钮的时候，所以按钮同时处于不选中状态。要实现这个效果，我们需要写一些js代码来实现：

     function selectAll(flag) {
if (document.customizeContentForm.blockId != null ) {
var len = document.customizeContentForm.blockId.length;
if (len > 1) {
for (var i = 0; i < len; i++) {
document.customizeContentForm.blockId[i].checked = flag;
}
}
else {
document.customizeContentForm.blockId.checked = flag;
}
}
}

     可以看到我们是通过checkbox的onclick事件来触发选中状态的，但点击 全选 按钮的时候，遍历表单中的所有checkbox，并把每个checkbox的checked属性设置为true ，这样所有的checkbox就同时被选中了。反之，把所有checkbox的checked属性设置成false，所有的checkbox就都处于不选中状态了。

     很简单吧！嘿嘿。。。。

本文来自:北漂一族[http://www.nanbianhz.com]
转载请注明详细出处:http://www.nanbianhz.com/checkbox-select-all-deselect-all.htm