实现复选框的多选功能

原创 2018年04月17日 14:44:42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员列表</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        table{
            width: 500px;
            margin:auto;
            border-collapse: collapse;
        }
        th,td{
            text-align: center;
            border:1px solid #000;
        }
        h1{
            text-align: center;
            margin:100px 0 20px 0;
        }
    </style>

</head>
<body>

<h1>管理员列表</h1>

<table id="data">
    <thead>
        <tr>
            <th>
                <input name="choose" type="checkbox" class="checked" value="全选" onclick="selectAll(this)">
            </th>
            <th>管理员ID</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td><input name="choose" type="checkbox"></td>
        <td>1</td>
        <td>Tester</td>
        <td>
            <button>修改</button>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input name="choose" type="checkbox"></td>
        <td>2</td>
        <td>Manager</td>
        <td>
            <button>修改</button>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input name="choose" type="checkbox"></td>
        <td>3</td>
        <td>Analyst</td>
        <td>
            <button>修改</button>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input name="choose" type="checkbox"></td>
        <td>4</td>
        <td>Admin</td>
        <td>
            <button>修改</button>
            <button>删除</button>
        </td>
    </tr>
    </tbody>
</table>

<script>
//    全选或者取消全选
    function selectAll(chb) {
//        获得id为data的table下tbody下的tr下的第一个td中的input,保存在变量chbs中
        var data=document.getElementById("data");
        chbs=data.querySelectorAll("tbody>tr>td:first-child>input");

//        遍历chbs中的每一个chb
        for(var i=0;i<chbs.length;i++){
//            设置当前chb的checked等于chb的checked
            chbs[i].checked=chb.checked;
        }
    }
    window.onload=function () {
//        获得id为data的table下tbody下的tr下的第一个td中的input,保存在变量chbs中
        var data=document.getElementById("data");
        chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
//        遍历chbs中的每一个chb
        for(var i=0;i<chbs.length;i++){
//            设置当前chb的onclick=selectOne;
            chbs[i].onclick=selectOne;

        }
    }
    function selectOne() {//选中或取消选中一个chb
//        this-->当前选中的chb
//        获得data下thead下的第一个th下的input,保存在变量selAll中
        var selAll=data.querySelector("thead>tr>th:first-child>input");
//        如果当前chb的checked是false
        if(this.checked==false){
//            将selAll的checked改为false
            selAll.checked=false;
        }else {//否则
//            获得id为data下的tbody下tr下的第一个td中的input,保存在变量chbs中
            var chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
            for(var i=0;i<chbs.length;i++){//遍历chbs下每个chb
//                如果当前chb没有被选中,则直接返回
                if(chbs[i].checked==false){return}
            }//遍历结束
//            将selAll的checked改为true
            selAll.checked=true;
        }
    }

</script>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingleiming/article/details/79974671

checkbox 实现多选

无标题文档 请选择你爱好: 音乐 登山 游泳 ...
  • u013539760
  • u013539760
  • 2015-04-22 16:50:08
  • 2559

Ajax复选框多选删除的实现

AJAX多选删除的思路是通过控制器从后台删除数据,然后前台的数据是不会刷新的,我们需要用JQUERY把前台的数据也删掉。 首先,引用JQUERY 然后,写出一个个的复选框,其中之一是这样 ....
  • amazingdyd
  • amazingdyd
  • 2016-05-04 17:06:51
  • 896

使用CheckBox实现多选效果

  • Eroslol
  • Eroslol
  • 2016-11-09 13:43:54
  • 485

实现带复选框的下拉列表

最近在项目中有遇到需要带复选框的下拉列表,找了好久都没找到相关资料,只好自己用jQuery+css实现了一个简单的小demo,虽然有点丑,但效果基本实现了,大家将就着看吧。 注:(以下代码为本人自己...
  • guxin_duyin
  • guxin_duyin
  • 2017-04-16 10:54:18
  • 4945

复选框 实现 单选 全选

  • 2013年01月16日 12:52
  • 3KB
  • 下载

input:checkbox多选框实现单选效果

最近遇到一个小小的问题,就是有时候我们使用单选radio的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时便想到了功能强大的checkbox,但他是多选,怎么才能让他...
  • u010480479
  • u010480479
  • 2013-07-24 11:06:15
  • 9214

Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能 几种实现方法

 在DataGrid中实现列中加入CheckBox这种用法很常见,项目中也经常会用到,在网上搜了下基本就是实现itemRender.但是 感觉网上提供的实现上好些地方都是多余的 经过自己的改造感...
  • u011589095
  • u011589095
  • 2014-08-14 14:53:13
  • 1232

Angular实现一个简单的多选复选框的弹出框指令

之前的文章有写过包含树结构下拉框的。要实现一个包含多个复选框的下拉框该如何做呢?先上个效果图吧: 代码: ...
  • u014291497
  • u014291497
  • 2016-08-28 21:54:46
  • 2707

JavaScript--点击按钮实现复选框全选和反选功能

功能实现: 1、点击全选和反选按钮,实现复选框全选和部分选的功能 2、点击全选复选框,实现子复选框全选或全不选功能 完整代码: ...
  • she_rryn
  • she_rryn
  • 2015-08-20 22:34:29
  • 2401

Android CheckBox实现多选、全选、反选功能

CheckBox实现多选、全选、反选功能 前不久项目中用到了多选列表功能,在这里讲述一下实现思路以及需要注意的地方, 不足之处,敬请谅解! 实现多选功能列表一般可以用ListView 或Rec...
  • Luck_Nie
  • Luck_Nie
  • 2017-05-14 16:35:33
  • 1268
收藏助手
不良信息举报
您举报文章:实现复选框的多选功能
举报原因:
原因补充:

(最多只允许输入30个字)