js实现全选反选功能

 		* {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td {
            font: 14px "微软雅黑";
        }
        td:nth-of-type(1) {
            text-align: center;
        }
        tbody tr,
        tfoot tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
        button {
            width: 50px;
        }

<div class="wrap">
       <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                        <span id="txt">全选span>
                    th>
                    <th>米粉th>
                    <th>故乡th>
                tr>
            thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    td>
                    <td>桂林米粉td>
                    <td>桂林td>
                tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    td>
                    <td>螺蛳粉td>
                    <td>柳州td>
                tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    td>
                    <td>过桥米线td>
                    <td>云南td>
                tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    td>
                    <td>南昌拌粉td>
                    <td>江西td>
                tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    td>
                    <td>常德米粉td>
                    <td>湖南常德td>
                tr>
            tbody>
            <tfoot>
                <tr>
                    <td colspan="5"><button id="rev">反选button>td>
                tr>
            tfoot>
        table>
    div>

//通用js代码
//通过id名获取元素
function getId(id){
	return document.getElementById(id);
}
//通过父级id名获取父级下的元素
function getEle(pId,tagName){
	return getId(pId).document.getElementsByTagName(tagName);
}

		 //需求：1.全选功能
        // 2.反选功能--反向操作全选框
        // 3.反选按钮--列表选框取反（同时符合全选逻辑）


        //1.实现全选功能
        // 1.1获取全选按钮与span标签
        var cbAll = getId("j_cbAll"),
            txt = getId("txt"),
            cks = getEle("j_tb", "input");
        cbAll.onclick = function () {
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = this.checked;
            }
            txt.innerText = this.checked ? "全不选" : "全选";
        }

        // 2反选功能实现
        // 2.1循环遍历checkbox复选框
        for (var i = 0; i < cks.length; i++) {
            cks[i].onclick = getOption;
        }

        // 3.反选按钮--列表选框取反（同时符合全选逻辑）
        getId("rev").onclick = function () {
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = !cks[i].checked;
            }
            getOption();
        }

        // 封装一个函数
        function getOption() {
            var flag = true; //默认情况下，全选按钮为全选中状态（不是直接显示在页面上的默认状态）
            // 循环遍历每一个列表前的复选框状态
            for (var j = 0; j < cks.length; j++) {
                // 只要有一个没有被选中的话全选框就不被选中，故找到一个没有被选中的复选框就不再查询
                if (!cks[j].checked) {
                    flag = false;
                    break;
                }
            }
            cbAll.checked = flag;
            txt.innerText = cbAll.checked ? "全不选" : "全选";
        }