用JavaScript实现复选框的全选,全部选和反选

阿胡爱编程

于 2023-10-20 16:21:07 发布

阅读量308

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_72926194/article/details/133948118

版权

文章目录

原生javaScript实现
使用jQuery实现

原生javaScript实现

html代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox" name="shouban">路飞
<input type="checkbox" name="shouban">索隆
<input type="checkbox" name="shouban" checked>香克斯
<input type="checkbox" name="shouban">乔巴
<input type="button" value="全选" id="btn1">
<input type="button" value="取消全选" id="btn2">
<input type="button" value="反选" id="btn3">
</body>
</html>

这里,我们使用的是javaScipt的动态绑定事件,因此给我们需要绑定的的元素指名了id;

var btnObj1 = document.getElementById("btn1");
    btnObj1.onclick = function (){
        var obj = document.getElementsByName("shouban");
        for (let i = 0; i < obj.length; i++) {
            obj[i].checked = true;
        }
    }
    var btnObj2 = document.getElementById("btn2");
    btnObj2.onclick = function (){
        var obj = document.getElementsByName("shouban");
        for (let i = 0; i < obj.length; i++) {
            obj[i].checked = false;
        }
    }
    var btnObj3 = document.getElementById("btn3");
    btnObj3.onclick = function (){
        var obj = document.getElementsByName("shouban");
        for (let i = 0; i < obj.length; i++) {
            obj[i].checked = !obj[i].checked
        }
    }

使用jQuery实现

关于jQuery的使用,推荐在菜鸟教程上学习;

$(function (){
        $("#btn1").click(function (){
            $("input[type=checkbox]").attr("checked", true);
        })
        $("#btn2").click(function (){
            $("input[type=checkbox]").attr("checked", false);
        })
        $("#btn3").click(function (){
            var $checkbox = $(":checkbox");
            for (let i = 0; i < $checkbox.length; i++) {
                $checkbox[i].checked = !$checkbox[i].checked;
            }
        })
    })

在javaScript中,checked的属性值为true或者false
对于全选:
    就是选中所有的checkbox元素,为元素赋予checked属性.
对于不全选:
    就是选中所有的checkbox元素,为元素清除checked属性.
对于反选:
    就是将选中的元素清除checked属性,将未选中的元素赋予checked属性
关于选择器,是javaScript的一大重点,要熟练掌握

阿胡爱编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
用JavaScript实现复选框的全选,全部选和反选

就是将选中的元素清除checked属性,将未选中的元素赋予checked属性。就是选中所有的checkbox元素,为元素赋予checked属性.就是选中所有的checkbox元素,为元素清除checked属性.在javaScript中,checked的属性值为。,因此给我们需要绑定的的元素指名了id;这里,我们使用的是javaScipt的。的使用,推荐在菜鸟教程上学习;
复制链接

扫一扫