JavaScript-商品结算（全选操作，反选操作）

最新推荐文章于 2023-11-02 15:23:56 发布

Liutonglin

最新推荐文章于 2023-11-02 15:23:56 发布

阅读量1.4k

点赞数 2

分类专栏：前端学习笔记文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_40757071/article/details/82784956

版权

学习笔记同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

复选框如果要选中，设置checked=true，取消设置checked=false

全选：通过name属性得到上面所有的复选框对象，遍历集合，将每一个元素的checked设置为true。

反选：原来选中的设置false，原来没选的设置为true。

页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>商品价格列表</h3>
    <input type="checkbox" name="item" value="300" /> 运动鞋<br />
    <input type="checkbox" name="item" value="200" /> 板鞋<br />
    <input type="checkbox" name="item" value="3000" /> 笔记本电脑<br />
    <input type="checkbox" name="item" value="400" /> 手表<br />
    <input type="checkbox" name="item" value="150" /> 厨具<br />
    <hr/>
    <input type="checkbox" id="all"  onclick="selectAll()" />全选/全不选 &nbsp;
    <input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>&nbsp;
    <input type="button" value=" 结 账 " onclick="total()" />&nbsp;<span id="result"></span>
</body>
</html>

JavaScript代码：


    <script>
        /*点击全选和全不选的按钮 其他的复选框 应该跟全选框一致*/
        function selectAll(){
            //点击全选的状态.
            //1.获得全选和全不选的状态值 通过checked属性  checked="checked" ==>>html语法
            var allCkb = document.getElementById("all");
            //checked属性是boolean类型 ==>> javascript语法
            //alert(allCkb.checked);

            //2.获得其他复选框
            var otherCkb = document.getElementsByName("item");
            for(var i = 0 ; i<otherCkb.length ; i++){
                //全选框的状态赋值给每一个复选框
                otherCkb[i].checked = allCkb.checked;
            }
        }
        //点击事件
        function reverseSelect(){
            //获得其他复选框即可
            var otherCkb = document.getElementsByName("item");
            //遍历
            for(var i = 0 ; i<otherCkb.length ; i++){
                otherCkb[i].checked = !otherCkb[i].checked;
            }
        }
        //点击结账
        function total(){
            //1.获得所有复选框
            var otherCkb = document.getElementsByName("item");

            var totalPrice  = 0 ;
            //2.循环判断哪些被选中
            for(var i=0;i<otherCkb.length ; i++){
                if(otherCkb[i].checked ==true){
                    //3.选中的价格相加
                    totalPrice+= parseInt( otherCkb[i].value );
                }
            }
            alert(totalPrice);
        }
    </script>

Liutonglin

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-商品结算（全选操作，反选操作）

复选框如果要选中，设置checked=true，取消设置checked=false全选：通过name属性得到上面所有的复选框对象，遍历集合，将每一个元素的checked设置为true。反选：原来选中的设置false，原来没选的设置为true。页面&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt...
复制链接

扫一扫