表单全选以及取消全选的制作

简介: 表单全选以及取消全选的制作

屏幕快照 2022-05-07 下午3.30.30.png

    <script>
        // 1. 全选和取消全选做法:  让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中,如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中, 上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中,剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
相关文章
|
3月前
点击全选获取所有复选框
点击全选获取所有复选框
27 1
|
3月前
|
JavaScript 前端开发
复选框的全选和取消
该博客文章提供了HTML和JavaScript代码实现复选框的全选和取消全选功能,并展示了测试结果的截图。
复选框的全选和取消
|
3月前
点击全选,使所有复选框被选中
点击全选,使所有复选框被选中
45 0
|
6月前
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
点击按钮,新增输入框,再点击按钮,删除输入框
点击按钮,新增输入框,再点击按钮,删除输入框
53 0
js表单全选和取消全选
这是一个全选和取消全选的功能,最上边的是全选框,下边的是单选框。 1. 全选框选中,下边的所有单选框也都选中,全选框取消选中,下边的单选全不选中。如果全选选中情况下,下边的取消选中一个,哪上边的全选框就不选中。 2. 第二就是下边的单选框一个一个选中,等到下边的单选框全部选中后,上边的全选框选中。同样取消一个单选,全选就不选中。
|
JavaScript
jquery全选和取消全选
jquery全选和取消全选
133 0
|
JavaScript
DOM ------ 表单的全选和取消全选
DOM ------ 表单的全选和取消全选
113 0
|
存储 关系型数据库 MySQL
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
401 0
|
JavaScript 双11
JS 多选框全选和取消全选
JS 多选框全选和取消全选
JS 多选框全选和取消全选