Javascript全选和反选

最新推荐文章于 2021-05-30 19:54:15 发布

长安之

最新推荐文章于 2021-05-30 19:54:15 发布

阅读量98

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_40281743/article/details/102939518

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

H5代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="testselect.js"></script>
</head>

<body>
    <input type="checkbox" name="" id="selectAll" />全选
    <input type="checkbox" name="" id="oppositeSelect" />反选
    <input type="checkbox" name="dish" id="" />西红柿鸡蛋
    <input type="checkbox" name="dish" id="" />水煮鱼
    <input type="checkbox" name="dish" id="" />红烧鲫鱼
    <input type="checkbox" name="dish" id="" />清蒸窝窝头
    <input type="checkbox" name="dish" id="" />红烧猪头肉
    <input type="checkbox" name="dish" id="" />水饺
    <input type="checkbox" name="dish" id="" />烤鸭
    <input type="checkbox" name="dish" id="" />香菇牛肉
    <input type="checkbox" name="dish" id="" />沙拉
    <div >
        <p class="changeStyle">aaaaaaaaaaaaaa</p>
    </div>
</body>

</html>

js代码：

window.onload = function () {
    var selectAll = this.document.querySelector("#selectAll");
    var oppositeSelect = this.document.querySelector("#oppositeSelect");
    var dish = this.document.getElementsByName("dish");
    //全选
    selectAll.onclick = function () {
        oppositeSelect.checked = false;
        for (let index = 0; index < dish.length; index++) {
            dish[index].checked = this.checked;
        }
    }
    //反选
    oppositeSelect.onclick = function () {
        selectAll.checked = false;
        for (let index = 0; index < dish.length; index++) {
            dish[index].checked = !dish[index].checked;
        }
    }
    //当个体全部选中的时候，全选选中，反之取消选中
    for (let index = 0; index < dish.length; index++) {
        dish[index].onclick = function () {
            oppositeSelect.checked = false;
            var isAllCheck = true;
            for (let i = 0; i < dish.length; i++) {
                if (!dish[i].checked) {
                    isAllCheck = false;
                }
            }
            selectAll.checked = isAllCheck;
        }

    }
    //可以获取到dom的方法
    // var changeStyle = this.document.getElementsByName("changeStyle")[0];
    // var changeStyle = this.document.getElementsByClassName("changeStyle")[0];
    // var changeStyle = this.document.getElementsByTagName("p")[0];
    // var changeStyle = this.document.querySelector(".changeStyle");
    var changeStyle = this.document.querySelectorAll(".changeStyle")[0];
    // var changeStyle = this.document.getElementById("changeStyle");
    changeStyle.style.fontSize = 22;
    changeStyle.style.color = 'red';
    with(changeStyle.style){
        fontSize = 11;
        color = 'orange';
        backgroundColor = 'black';
    }
   
}

长安之

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript全选和反选

H5代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫