JavaScript简单DOM案例（全选、不选、反选）

最新推荐文章于 2023-02-13 08:04:23 发布

清风挽歌

最新推荐文章于 2023-02-13 08:04:23 发布

阅读量689

点赞数

分类专栏： JavaScript 文章标签： checkbox js javascript html

本文链接：https://blog.youkuaiyun.com/zxy144/article/details/109732624

版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

JavaScript简单DOM案例（全选、不选、反选）

准备一个商品列表，每个商品上有一个复选框，点击不同按钮实现全选、全不选、反选效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="800px" align="center">
    <tr align="center">
        <th>选择</th>
        <th>商品名</th>
        <th>编号</th>
    </tr>
    <tr align="center">
        <td><input type="checkbox" name="goods" value="1"></td>
        <td>衣服</td>
        <td>1001</td>
    </tr>
    <tr align="center">
        <td><input type="checkbox" name="goods" value="2"></td>
        <td>裤子</td>
        <td>1002</td>
    </tr>
    <tr align="center">
        <td><input type="checkbox" name="goods" value="3"></td>
        <td>鞋子</td>
        <td>1003</td>
    </tr>
    <tr align="center">
        <td><input type="checkbox" name="goods" value="4"></td>
        <td>袜子</td>
        <td>1004</td>
    </tr>
    <tr align="center">
        <td><input type="checkbox" name="goods" value="5"></td>
        <td>帽子</td>
        <td>1005</td>
    </tr>
    <tr align="center">
        <td><input type="checkbox" name="goods" value="6"></td>
        <td>手套</td>
        <td>1006</td>
    </tr>
</table>

<div style="width: 100%;padding-top: 50px" align="center">
    <button onclick="quanxuan();">全选</button>
    <button onclick="quanbuxuan();">全不选</button>
    <button onclick="fanxuan();">反选</button>
</div>

</body>


<script>
    //点击全选执行的方法
    function quanxuan(){
        var goods = document.getElementsByName("goods");
        for (var i=0;i<goods.length;i++){
            //把所有商品元素的checked属性设置为true
            goods[i].checked=true;
        }
    }
    //点击全不选执行的方法
    function quanbuxuan(){
        var goods = document.getElementsByName("goods");
        for (var i=0;i<goods.length;i++){
            //把所有商品元素的checked属性设置为false
            goods[i].checked=false;
        }
    }
    //点击反选执行的方法
    function fanxuan(){
        var goods = document.getElementsByName("goods");
        for (var i=0;i<goods.length;i++){
            //把所有商品元素的checked属性设置为当前相反的值
            goods[i].checked=!goods[i].checked;
        }
    }

</script>
</html>