javascript 通过复选框实现全选和全不选操作

xijiao_jiao

于 2018-07-02 22:59:46 发布

阅读量496

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xijiao_jiao/article/details/80891097

本文档展示了如何使用JavaScript实现全选和全不选操作，主要通过监听复选框的点击事件，获取所有相关复选框并设置它们的状态。在HTML示例中，当点击全选复选框时，所有带有'checkone'名称的复选框将被相应地选中或取消选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--1. 需求分析:-->
    <!--在后台实现一个批量删除操作, 前台需要全选所有的复选框-->


<!--2. 技术分析:-->
    <!--1). 确认事件:鼠标单击事件onclick,绑定事件的位置;-->
    <!--2). 获取编号前面的复选框的状态(是否选中)-->
            <!--获取复选框: var checkAllEle = document.getElementById("id");-->
            <!--获取复选框的状态: checkAllEle.checked-->
    <!--3). 获取下面的所有复选框:-->
          <!--document.getElementByName("name")-->

<!--3. 步骤实现:-->

    <!--1). 确认事件:鼠标单击事件onclick,并对其绑定一个函数;-->
    <!--2). 书写函数(书写编号前面的复选框， 获取其状态)-->
    <!--3). 判断编号前面复选框的状态-->
    <!--4). 如果未选中, 获取下面所有的复选框， 并将其状态置为选中;-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>#[{09-实现全选和全不选操作}]#</title>
    <script>
        function selectAll() {
            //获取学号前面的复选框
            var checkAllEle=document.getElementById('selectAll');
            //根据名称获取下面所有的复选框
            var checkones=document.getElementsByName('checkone');
            //判断复选框的状态（对象.checked：如果返回值为ture，则表示已经选中，反之未选中）
            if (checkAllEle.checked){
                //如果被选中，通过循环依次改变复选框的状态
                for (var i =0;i<checkones.length;i++){
                    //拿到每一个复选框并将其设为选中状态
                    checkones[i].checked=true;
                }
            }else{
                //如果没有被选中，通过循环依次改变复选框的状态
                for (var i=0;i<checkones.length;i++){
                    //拿到每一个复选框并将其设为未选中
                    checkones[i].checked=false;
                }
            }

        }
    </script>
</head>
<body>
<h1 align="center">学生信息</h1>
<!--创建一个6行4列的表格-->
<table border="1" align="center" width="50%" cellpadding="10">
    <tr>
        <td colspan="4" align="center" >
        <input type="button" value="添加">    
        <input type="button" value="删除">
        </td>
    </tr>
    <tr>
        <!--确定事件：onclick    并且绑定函数-->
        <td><input type="checkbox" onclick="selectAll()" id="selectAll"></td>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>
        <input type="checkbox" name="checkone"></td>
        <td>001</td>
        <td>lance</td>
        <td>20</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkone"></td>
        <td>002</td>
        <td>Axis</td>
        <td>21</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkone"></td>
        <td>003</td>
        <td>joy</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkone"></td>
        <td>004</td>
        <td>helen</td>
        <td>18</td>
    </tr>
</table>

</body>
</html>