第十六篇 JS实现全选操作

Posted 幸享龙枫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第十六篇 JS实现全选操作相关的知识,希望对你有一定的参考价值。

JS实现全选

 
嗨,同学们好,老师这里是专门教同学解决一些针对性的问题,所以说综合起来,就要靠同学自己了。
这节课我们学一个很实用的东西,全选操作!比如淘宝这种商城对吧,我的购物车,我要全选购买,或者删除,一个一个的来肯定麻烦,所以就有了全选和批量处理,那就是复选框!
 
这里我们用一个table表格来控制吧!看代码:
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JS全选,复选框</title>
</head>
<body>
<table id="mytable">
    <tr>
        <th><input type="checkbox" id="quan"/></th>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>地址</th>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>1</td>
        <td>张三</td>
        <td></td>
        <td>四川省成都市</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>2</td>
        <td>李斯</td>
        <td></td>
        <td>四川省成都市</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>3</td>
        <td>玩玩玩</td>
        <td></td>
        <td>四川省成都市</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>4</td>
        <td>哈哈哈</td>
        <td></td>
        <td>四川省成都市</td>
    </tr>
</table>
<script>
    // onload事件 页面加载完直接运行
    window.onload = function () {
        var mytable = document.getElementById("mytable");
        var qq = document.getElementById("quan");
        mytable.style.border = "1px solid gray";
        mytable.style.borderCollapse = "collapse";
        mytable.style.textAlign = "center";
        mytable.style.width = "800px";
        //以上是给table表格添加样式
        //使用循环获取到表格的tr长度
        for (i = 1; i < mytable.rows.length; i++) {
            //因为复选框是tr里的第一个,所以cells里的数组下标为0
            mytable.rows[i].cells[0].firstChild.onclick = function () {
                //当我点击它,就做判断
                //先判断它本身是被选中的就往下面走
                if (this.checked) {
                    //如果它被选中我们就走进for循环
                    for (j = 1; j < mytable.rows.length; j++) {
                        //获取tr的长度,然后判断所有的复选框
                        if (!mytable.rows[j].cells[0].firstChild.checked) {
                            //如果这些复选框,有一个没有被选中,全选就变成未被选中
                            qq.checked = false;
                            return true;
                            //最后结束返回 true
                        }
                    }
                    //if判断,所有复选框都是选中的,就让全选变成true 变成选中
                    qq.checked=true;
                }
                else {
                    //如果它本身没有被选中,全选当然是变成false 未被选中
                    qq.checked = false;
                }
            }
        }
        //点击全选的复选框,将所有的复选框变成和它一样,要么选中,要么未选中
        qq.onclick=function() {
            for (i = 1; i < mytable.rows.length; i++) {
                mytable.rows[i].cells[0].firstChild.checked = this.checked;
            }
        };
        //以下是循环并判断表格里的tr和td,添加css样式
        for (i = 0; i < mytable.rows.length; i++) {
            if (i == 0) {
                mytable.rows[0].style.backgroundColor = "lightgray";
            } else {
                mytable.rows[i].onmouseover = function () {
                    this.style.backgroundColor = "red";
                };
                mytable.rows[i].style.cursor = "pointer";
                if (i % 2 == 0) {
                    mytable.rows[i].style.backgroundColor = "yellow";
                    mytable.rows[i].onmouseout = function () {
                        this.style.backgroundColor = "yellow";
                    }
                } else {
                    mytable.rows[i].style.backgroundColor = "orange";
                    mytable.rows[i].onmouseout = function () {
                        this.style.backgroundColor = "orange";
                    }
                }
            }
            for (j = 0; j < mytable.rows[i].cells.length; j++) {
                var c = mytable.rows[i].cells[j];
                c.style.border = "1px solid gray";
            }
        }
    }
</script>
</body>
</html>
 
以上代码,同学们主要看的不是给table表格添加样式,当然了,最下面的代码,判断和循环那里可以多看看,是什么意思,我没写注释,重点是,全选的操作那里。
代码同学们可以直接copy拿走,但是一定要了解里面的代码,这样你修改成自己的代码也就简单了,而且以后自己才能写出来哦。
 

以上是关于第十六篇 JS实现全选操作的主要内容,如果未能解决你的问题,请参考以下文章

F28335第十六篇——Flash操作

F28335第十六篇——内部Flash操作

Linux篇第十六篇——多线程(读写锁+线程池)

Linux篇第十六篇——多线程(读写锁+线程池)

Linux篇第十六篇——多线程(读写锁+线程池)

C++从入门到入土第十六篇:再谈数据结构--栈和队列