请人帮忙看一下JS的功能修改问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style>
li {display:inline;float:left}
</style>
</head>
<body>
<div class="area_2 mb10">
<div class="tit fix">
<h3 class="l">人气组合</h3>
<p class="l"></p>
</div>
<div class="clear"></div>
<div class="cont">
<ul class="fix">

                    <div class="scrolling" id="combo" style="overflow-x:scroll;">
                    <ul style="width:1000px;">
<li class="bg1">
<a href="#" ><img src="images/w1_48.png" alt="" /></a>
<p><a href="#" >商品</a></p>
<div class="check"><label><input type="checkbox" name="" id="goodadd[]" onclick="goodss(345)"/>￥345.00</label></div>
</li>
                    <li class="bg1">
<a href="#" ><img src="images/w1_48.png" alt="" /></a>
<p><a href="#" >商品</a></p>
<div class="check"><label><input type="checkbox" name="" id="goodadd[]" onclick="goodss(345)"/>￥345.00</label></div>
</li>
                    <li class="bg1">
<a href="#" ><img src="images/w1_48.png" alt="" /></a>
<p><a href="#" >商品</a></p>
<div class="check"><label><input type="checkbox" name="" id="goodadd[]" onclick="goodss(345)"/>￥345.00</label></div>
</li>
<li class="bg1">
<a href="#" ><img src="images/w1_48.png" alt="" /></a>
<p><a href="#" >商品</a></p>
<div class="check"><label><input type="checkbox" name="" id="goodadd[]" onclick="goodss(345)"/>￥345.00</label></div>
</li>
<li class="">
<a href="#" ><img src="images/w1_48.png" alt="" /></a>
<p><a href="#" >商品</a></p>
<div class="check"><label><input type="checkbox" name="" id="goodadd[]" onclick="goodss(345)"/>￥345.00</label></div>
</li>
                    </ul>
                    </div>
<li class="bg3">
<p>总参考价格：<i>￥708.00</i></p>
<p id="gooda">总优惠价格：<span id="goodp">￥698.00</span></p>
<div class="btn"><a href="#" ><img src="images/w1_59.png" alt="" /></a></div>
</li>
</ul>
</div>
</div>
</body>
</html>
<script>
var combo=document.getElementById("combo").getElementsByTagName("li");
var goodadd=document.getElementById("goodadd[]");
var gooda=document.getElementById("gooda");
var spanp=document.createElement("span");
spanp.id="spanp";
function goodss(price){

        gooda.removeChild(gooda.firstChild.nextSibling);//移除gooda第一个节点的下一个节点
   

if(goodadd.checked){

var nprice=345;

nprice+=price;
var nnprice='￥'+nprice+'.00';

spanp.innerHTML=nnprice;
//
//spanp.parentNode.removeChild(gooda); 
gooda.appendChild(spanp);//插入新节点

//gooda.replaceChild(spanp.innerHTML,gooda.innerHTML);

}else{
var nprice=345;
nprice=price;
var nnprice='￥'+nprice+'.00';
spanp.innerHTML=nnprice;
gooda.appendChild(spanp);
}
}
</script>
我想做成类似于京东关联营销的东西，点击对勾就会加上相应的价格！
我写的第一个是通过删除一个节点，然后加上一个节点！
我现在做出来了第一个商品点击对勾，会有对应的价格变化，但是我想实现多选几个价格累加的效果，想问一下大家怎么写呢？
京东地址：
http://item.jd.com/833156.html

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="zh-CN" />
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <style>
            li {display:inline;float:left}
        </style>
    </head>
    <body>
    <div class="area_2 mb10">
        <div class="tit fix">
            <h3 class="l">人气组合</h3>
            <p class="l"></p>
        </div>
        <div class="clear"></div>
        <div class="cont">
            <ul class="fix">            <div class="scrolling" id="combo" style="overflow-x:scroll;">
                    <ul style="width:1000px;" id="list">
                        <li class="bg1">
                            <a href="#" ><img src="images/w1_48.png" alt="" /></a>
                            <p><a href="#" >商品</a></p>
                            <div class="check"><label><input type="checkbox" name="" id="goodadd[]" onclick="goodss(345)"/>￥345.00</label></div>
                        </li>
                        <li class="bg1">
                            <a href="#" ><img src="images/w1_48.png" alt="" /></a>
                            <p><a href="#" >商品</a></p>
                            <div class="check"><label><input type="checkbox" name="" id="goodadd[]" onclick="goodss(345)"/>￥345.00</label></div>
                        </li>
                        <li class="bg1">
                            <a href="#" ><img src="images/w1_48.png" alt="" /></a>
                            <p><a href="#" >商品</a></p>
                            <div class="check"><label><input type="checkbox" name="" id="goodadd[]" onclick="goodss(345)"/>￥345.00</label></div>
                        </li>
                        <li class="bg1">
                            <a href="#" ><img src="images/w1_48.png" alt="" /></a>
                            <p><a href="#" >商品</a></p>
                            <div class="check"><label><input type="checkbox" name="" id="goodadd[]" onclick="goodss(345)"/>￥345.00</label></div>
                        </li>
                        <li class="">
                            <a href="#" ><img src="images/w1_48.png" alt="" /></a>
                            <p><a href="#" >商品</a></p>
                            <div class="check"><label><input type="checkbox" name="" id="goodadd[]" onclick="goodss(345)"/>￥345.00</label></div>
                        </li>
                    </ul>
                </div>
                <li class="bg3">
                    <p>总参考价格：<i>￥708.00</i></p>
                    <p id="gooda">总优惠价格：<span id="goodp">￥698.00</span></p>
                    <div class="btn"><a href="#" ><img src="images/w1_59.png" alt="" /></a></div>
                </li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    <script>
        function each(fn) {
            for(var i = 0; i < this.length; i++) {
                if(fn && fn.call(this[i], i) === false) {
                    break;
                }
            }
        }
        function getByTag(tagName, parent) {
            parent = parent || document.body;
            var list = parent.getElementsByTagName(tagName);
            list.each = function(fn) {
                each.call(list, fn);
            };
            return list;
        }
        var combo=document.getElementById("combo").getElementsByTagName("li");
        var goodadd=document.getElementById("goodadd[]");
        var gooda=document.getElementById("gooda");
        var spanp=document.createElement("span");
        spanp.id="spanp";
        var list = getByTag('input', document.getElementById('list'));
        var goodp = document.getElementById("goodp");
        function goodss(price){
            var total = 0;
            list.each(function() {
                if(this.checked) {
                    total += 345;
                }
            });
            goodp.innerHTML = '￥'+ total +'.00';
        }
        /*function goodss(price){        gooda.removeChild(gooda.firstChild.nextSibling);//移除gooda第一个节点的下一个节点
            if(goodadd.checked){            var nprice=345;            nprice+=price;
                var nnprice='￥'+nprice+'.00';            spanp.innerHTML=nnprice;
                //
                //spanp.parentNode.removeChild(gooda);
                gooda.appendChild(spanp);//插入新节点            //gooda.replaceChild(spanp.innerHTML,gooda.innerHTML);        }else{
                var nprice=345;
                nprice=price;
                var nnprice='￥'+nprice+'.00';
                spanp.innerHTML=nnprice;
                gooda.appendChild(spanp);
            }
        }*/
    </script>