dfssdfdsdfd 2021-11-30 21:10 采纳率: 97.6%
浏览 58
已结题

有人帮我改一下这个代码吗？运行不了，好的必采纳

下面这个代码是我从网上复制过来的，我想利用这个代码的全选商品后可以随之增加商品的选中价格，可是运行不了，哪里出了问题呢

function getInput(obj){
            //获取a标签 del事件的对象
            var a =obj.parentNode.parentNode.children[6].children[1];
            //取消选中事件
            if(obj.checked==false){
                //只要有一个被取消选中，那么全选按钮也被取消选中
                checkboxs[0].checked=false;
                //调用此元素的价格，将其的价格总总价减出，不删除元素
               del(a,false)
            }else{
                    var num = Number(obj.parentNode.parentNode.children[5].children[1].innerHTML);
                //所有商品总价对象
                var totalObj = document.getElementById("total");
                //更改后的价格
                num = (Number(totalObj.innerHTML)+num).toFixed(2);
                //更改总的价格
                totalObj.innerHTML=num;
                //打一个标记，用于判断是否存在未被选中的按钮，如果有一个就是false;
                var flag = true;
                for(var j=1;j<checkboxs.length;j++){
                   if(checkboxs[j].checked==false){
                      flag=false;
                   }
                }
                //给全选按钮设置选中与否
                checkboxs[0].checked=flag;
                }
            }
        }

下面是总的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折叠菜单</title>
    <style>
        ul{list-style: none;padding: 0;margin: 0;}
        div{width: 100%;border: 1px solid #5d7851;margin: 1px;}
        div li{background: #545178;border-bottom:1px solid #fff ;}
        div th{background: #515278;border-bottom:1px solid #fff ;}
        div li a{text-decoration: none;color: #fff;font-size: 16px;height: 40px;line-height: 63px;padding-left: 10px;}
        div li a:hover{text-decoration: underline;}
        .wrap {width: 100%;display: none;}
        .wrap li{background: white;margin: 0;}
        .wrap li a{color: #180505;font-size: 16px;}
        #left{width: 40%;float: left;overflow: hidden;}
        #right{width: 60%;float: left;margin-left: -10px;display: inline;overflow: hidden;}
        .sale {background-color: rgb(15, 90, 228);color: white;text-align: center;}
        input{width:25px;}
    </style>
</head>
<body>
    <div id="left">
        <div id="fold">  
            <ul>
                <li>
                    <a href="#">鞋类</a>
                    <ul class="wrap">
                        <li><a href="#">经典老爹鞋</a></li>
                        <li><a href="#">新款帆布鞋</a></li>
                     </ul>
                </li>
                <li>
                    <a href="#">玩具类</a>
                    <ul class="wrap">
                        <li><a href="#">经典黄鸡玩偶</a></li>
                        <li><a href="#">新款小单车玩具</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">裤子类</a>
                    <ul class="wrap">
                        <li><a href="#">经典裤子</a></li>
                        <li><a href="#">新款皮裤</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">科技类</a>
                    <ul class="wrap">
                        <li><a href="#">经典苹果电脑</a></li>
                        <li><a href="#">新款菠萝手机</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="right">
        <table border="1" cellspacing="73%" cellpadding="27%";>
            <thead>
                <th>
                    <input type='checkbox' class="selectAll">全选</th>
                <th>商品</th>
                <th>数量</th>
                <th>单价</th>
                <th>状态</th>
                <th>库存</th>
                <th>小计</th>
            </thead>
            <tbody>
                <tr>
                    <td><input type='checkbox' class="checkbox1"></td>
                    <td><img src="images/1.jpg" width=120px height=40px>经典老爹鞋</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        69.00
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox' class="checkbox1"></td>
                    <td><img src="images/1.jpg" width=120px height=40px>新款帆布鞋</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        19.88
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox' class="checkbox1"></td>
                    <td><img src="images/1.jpg" width=120px height=40px>经典黄鸡玩偶</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        9.99
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox' class="checkbox1"></td>
                    <td><img src="images/1.jpg" width=120px height=40px>新款小单车玩具</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        16.1
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox' class="checkbox1"></td>
                    <td><img src="images/1.jpg" width=120px height=40px>经典裤子</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        10.2
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox' class="checkbox1"></td>
                    <td><img src="images/1.jpg" width=120px height=40px>新款皮裤</td>
                    <td>
                        <button class="jian">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        60.1
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox' class="checkbox1"></td>
                    <td><img src="images/1.jpg" width=120px height=40px>经典苹果电脑</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        999
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox' class="checkbox1"></td>
                    <td><img src="images/1.jpg" width=120px height=40px>新款菠萝手机</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        996
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5"></td>
                    <td>总计</td>
                    <td class="total"></td>
                </tr>
                <tr>
                    <td>
                    <button class="sale" style="height: 50px;width: 100px;"t>提交</button>
                    </td>
                </tr>
                </tfoot>
            </tfoot>
        </table>
    </div> 
    
    <script src="jquery-3.6.0.js"></script>
    <script>
         $('#fold>ul>li:first').find('.wrap').css({"display":"block"});
         $('#fold>ul>li').click(function(){
             $(this).siblings('li').find('wrap').css('display',"none");
             $(this).find('.wrap').css('display',"block");
         })

         $(".add").click(function() {
        var num = $(this).prev().val();
        if(num==20){
            return;
        }
        
        $(this).prev().val(parseInt(++num));
        $(this).parent().next().next().next().text(20-num) 
         if ($(this).parent().next().next().next().text()==0) {
            $(this).parent().next().next().text('无货')
        }
         money ()
    })
    $(".del").click(function() {
        
        var num = $(this).next().val();
        if(num==0){
            return;
        }
        $(this).next().val(parseInt(--num));
        $(this).parent().next().next().next().text(20-num)
        
            $(this).parent().next().next().text('有货')
            money ()
    })

    function money(){
        var price=$('.add').parent().next();
        var num=$('.add').prev();
        var xiaoji=$('.xiaoji');
        var sum=0.0;
        for (var i=0;i<price.length;i++) {
            var price1 = parseFloat(price.eq(i).text());
            var num1 = parseFloat(num.eq(i).val());
        //    alert(price1*num1)
            xiaoji.eq(i).text((price1*num1).toFixed(2))
            sum+=price1*num1;
        }
        $('.total').text(sum.toFixed(2));
    } 
    
    $(".sale").click(function(){
    var sale =document.createElement("input");
            sale.className = "sale";
            sale.value = $('.total');
    })  
    
    window.onload=function(){
    var selectAllBtn = document.querySelector('.selectAll')
        var checkbox1s = document.querySelectorAll('.checkbox1')
        console.log(selectAllBtn)
        console.log(checkbox1s)
        var checkedNum = 0
        selectAllBtn.onclick = function () {
            if (selectAllBtn.checked == true) {
                checkbox1s.forEach(function (checkbox, index) {
                    checkbox.checked = true
              
                })
                checkedNum=checkbox1s.length
            } else if (selectAllBtn.checked == false) {
                checkbox1s.forEach(function (checkbox, index) {
                    checkbox.checked = false
              
                })
                checkedNum=0
                
                console.log('selectAllBtn.checked =' + selectAllBtn.checked)
            }
        }
        
        checkbox1s.forEach(function (checkbox, index) {
            checkbox.onclick = function () {
                if (checkbox.checked == false) {
                    checkedNum--
                } else if (checkbox.checked == true) {
                    checkedNum++
                }
                if (checkedNum !== checkbox1s.length) {
                    selectAllBtn.checked = false
                } else if (checkedNum == checkbox1s.length) {
                    selectAllBtn.checked = true
                }

        function getInput(obj){
            //获取a标签 del事件的对象
            var a =obj.parentNode.parentNode.children[6].children[1];
            //取消选中事件
            if(obj.checked==false){
                //只要有一个被取消选中，那么全选按钮也被取消选中
                checkboxs[0].checked=false;
                //调用此元素的价格，将其的价格总总价减出，不删除元素
               del(a,false)
            }else{
                    var num = Number(obj.parentNode.parentNode.children[5].children[1].innerHTML);
                //所有商品总价对象
                var totalObj = document.getElementById("total");
                //更改后的价格
                num = (Number(totalObj.innerHTML)+num).toFixed(2);
                //更改总的价格
                totalObj.innerHTML=num;
                //打一个标记，用于判断是否存在未被选中的按钮，如果有一个就是false;
                var flag = true;
                for(var j=1;j<checkboxs.length;j++){
                   if(checkboxs[j].checked==false){
                      flag=false;
                   }
                }
                //给全选按钮设置选中与否
                checkboxs[0].checked=flag;
                }
            }
        }
      })
    }
    </script> 
</body>
</html>
  • 写回答

2条回答 默认 最新

  • 你好！机器人 2021-12-01 09:23
    关注

    算总计，你单点的时候，也可以直接调用getTotal

    img

    function getTotal(){
            var checkbox1s = document.querySelectorAll('.checkbox1')
            var total=0
            checkbox1s.forEach(function (checkbox, index) {
                if(checkbox.checked){
                    total+=当前选中的小计
                }
            })
            $('.total').text(total)
        }
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 12月13日
  • 已采纳回答 12月5日
  • 创建了问题 11月30日

悬赏问题

  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
  • ¥15 linux驱动，linux应用，多线程