JavaScript基础——实现全选、反选功能（checked） | IT小强的个人博客

代码笔记 IT小强xqitw.cn 2016年8月17日 23:55

摘要: JavaScript基础学习笔记之实现全选反选功能

[TOCM]

### js文件

```
/*
 *  ==================================================================
 * 		文 件 名: checkbox.js
 * 		概    要: 实现全选、反选功能
 * 		作    者: IT小强
 * 		创建时间: 2016-08-16
 * 		修改时间: 2016-08-16
 * 		copyright (c)2016 admin@xqitw.com
 *  ==================================================================
 */
 
/* 获取元素索引值 */
function index(current, obj) {
    for (var i = 0, length = obj.length; i < length; i++) {
        if (obj[i] == current) {
            return i;
        }
    }
}
 
/* 获取HTML元素 */
var selAll = document.getElementById("check-all");              // 全选按钮
var inverse = document.getElementById('inverse');               // 反选按钮
var obj = document.getElementsByName("check-child[]");          // 子按钮
var aTr = document.getElementsByClassName("news-item");         // 子按钮所在行
 
/* 初始化设置 */
var trColor = '#ccc';                                             // 选中行背景颜色
var count = obj.length;                                           // 子按钮的个数
var selectCount = 0;                                               // 统计选中按钮的个数
 
// 全选操作——选中全选按钮，下面的checkbox全部选中
selAll.onclick = function () {
    // 操作之前清空反选按钮
    inverse.checked = false;
    if (selAll.checked == false) {
        selectCount = 0;
        for (var i = 0; i < count; i++) {
            obj[i].checked = false;
            aTr[i].style.background = 'none';
        }
    } else {
        selectCount = count;
        for (var j = 0; j < count; j++) {
            obj[j].checked = true;
            aTr[j].style.background = trColor;
        }
    }
};
 
//累加操作——当选中所有的时候，全选按钮会勾上
for (var i = 0; i < count; i++) {
    obj[i].onclick = function () {
        var _index = index(this, obj);
        // 操作之前清空反选按钮
        inverse.checked = false;
        if (this.checked == true) {
            aTr[_index].style.background = trColor;
            selectCount++;
        } else {
            aTr[_index].style.background = 'none';
            selectCount--;
        }
        count == selectCount ? selAll.checked = true : selAll.checked = false;
    }
}
 
// 反选操作
inverse.onclick = function () {
    for (var i = 0; i < obj.length; i++) {
        if (obj[i].checked == true) {
            obj[i].checked = false;
            selectCount--;
            aTr[i].style.background = 'none';
        } else {
            obj[i].checked = true;
            selectCount++;
            aTr[i].style.background = trColor;
        }
    }
    count == selectCount ? selAll.checked = true : selAll.checked = false;
};
```

### css文件

```
/*
 *  ==================================================================
 * 		文 件 名: style.css        
 * 		概    要: css样式  
 * 		作    者: IT小强                                 
 * 		创建时间: 2016-08-16                 
 * 		修改时间: 2016-08-16      
 * 		copyright (c)2016 admin@xqitw.com        
 *  ==================================================================
 */
 
/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
 
/* clearfix 兼容IE6 */
.clearfix {
    zoom: 1;
}
 
/* css reset */
* {
    box-sizing: border-box;
}
 
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
    margin: 0;
    padding: 0;
}
 
li {
    list-style: none;
}
 
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
a {
    color: #000;
    text-decoration: none;
}
 
a:hover {
    color: #f40;
}
 
img, a img {
    border: none;
}
 
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
 
h1, h2, h3, h4, h5, h6, b, strong, th {
    font-weight: normal;
}
 
i, em {
    font-style: normal;
}
 
/* newslist */
.news-list {
    width: 960px;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
}
 
.news-list td {
    padding: 10px;
    text-align: center;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
 
.news-list td.colspan_left {
    text-align: left;
}
 
.news-list .news-item .checkbox-td {
    padding: 0;
}
 
.news-list .news-item label {
    display: block;
    width: 100%;
    height: 100%;
}

```

### html文件

```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全選、反選演示</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<table class="news-list news-list1">
    <tbody>
    <tr>
        <td colspan="6"><h1>Kelove 文章管理列表</h1></td>
    </tr>
    <tr>
        <td colspan="6" class="colspan_left">
            <input id="check-all" type="checkbox" name="check-all" title=""> <label for="check-all">全选</label>  | 
             <input id="inverse" type="checkbox" name="inverse" title=""> <label for="inverse">反选</label>  |  
            <a href="javascript:void();"><i class="fa fa-trash"></i> 彻底删除</a>   |  
            <a href="javascript:void();"><i class="fa fa-trash-o"></i> 移至回收站</a>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>文章标题</td>
        <td>文章分类</td>
        <td>文章作者</td>
        <td>发布日期</td>
        <td>操作</td>
    </tr>
    <tr class="news-item" style="background: none;">
        <td class="checkbox-td">
            <label for="news_126">
                <input id="news_126" type="checkbox" name="check-child[]" title="">
            </label>
        </td>
        <td class="colspan_left">
            <a href="#">标题已更新</a>
        </td>
        <td>默认分类</td>
        <td>超级管理员</td>
        <td>2016年08月09日 16:16:53</td>
        <td>
            <a href=""><i class="fa fa-edit"></i> 编辑</a>  |  
            <a onclick="return confirm('你确定要将--[标题已更新]--移至回收站吗？')"
               href=""><i class="fa fa-trash-o"></i> 移至回收站</a>
        </td>
    </tr>
    <tr class="news-item" style="background: none;">
        <td class="checkbox-td">
            <label for="news_125">
                <input id="news_125" type="checkbox" name="check-child[]" title="">
            </label>
        </td>
        <td class="colspan_left">
            <a href="#">面向对象110</a>
        </td>
        <td>默认分类</td>
        <td>超级管理员</td>
        <td>2016年08月09日 15:50:33</td>
        <td>
            <a href=""><i class="fa fa-edit"></i> 编辑</a>  |  
            <a onclick="return confirm('你确定要将--[面向对象110]--移至回收站吗？')"
               href=""><i class="fa fa-trash-o"></i> 移至回收站</a>
        </td>
    </tr>
    <tr class="news-item" style="background: none;">
        <td class="checkbox-td">
            <label for="news_124">
                <input id="news_124" type="checkbox" name="check-child[]" title="">
            </label>
        </td>
        <td class="colspan_left">
            <a href="#">惹我跳舞</a>
        </td>
        <td>默认分类</td>
        <td>超级管理员</td>
        <td>2016年08月09日 15:22:25</td>
        <td>
            <a href=""><i class="fa fa-edit"></i> 编辑</a>  |  
            <a onclick="return confirm('你确定要将--[惹我跳舞]--移至回收站吗？')"
               href=""><i class="fa fa-trash-o"></i> 移至回收站</a>
        </td>
    </tr>
    </tbody>
</table>
<script type="text/javascript" src="checkbox.js"></script>

</body>
</html>

```

### 效果预览

![/media/blog/2016-08-14/602D3429CDBFAB9F2FA5D0DA57DDE198.jpg](/media/blog/2016-08-14/602D3429CDBFAB9F2FA5D0DA57DDE198.jpg "/media/blog/2016-08-14/602D3429CDBFAB9F2FA5D0DA57DDE198.jpg")