js实现购物车简单功能怎么相加数量？

Question

我的input文本框里的值怎试都无法进行相加，数据类型转换也不行，
我就想知道怎么把多个文本框的值赋值到进行循环相加

<br> var ckok=document.getElementsByName(&quot;ck&quot;);<br><br> function btn1(){<br> for(var i=0; i<ckok.length;i++){<br> if(ckok[i].checked){<br> ckok[i].checked=false;<br> }else{<br> ckok[i].checked=true;<br> }<br> }<br> } <br>

<br> nav{<br> margin-bottom: 20px;<br> background: salmon;<br> }<br> h2,h5{<br> text-align: center;<br> font-family: &quot;微软雅黑&quot;;<br> }<br> .ck input{<br> display: block;<br> width: 30px;<br> height: 30px;<br> margin: auto auto;<br> }<br> .butt input{<br> display: block;<br> margin: auto auto;<br> width: 45px;<br> height: 30px;<br> border-radius: 10px;<br> }<br> .butt{<br> padding-bottom: 9px;<br><br> }<br> header{<br> border-bottom: 1px solid darkgrey;<br> padding-bottom: 5px;<br> padding-top: 5px;<br> padding-left: 5px;<br> padding-right: 5px;<br> border-left: 1px solid darkgray;<br> border-right: 1px solid darkgray;<br> }<br><br>

购物车

商品

件数

金额

裤子

<!--

-->

                    </div>
                    <div class="col-lg-3">
                        <h5>250</h5>
                    </div>
                </header>
                <header class="row">
                    <div class="col-lg-3 ck">
                        <input type="checkbox" name="ck" id="" value="1" onchange="ckb();" />
                    </div>
                    <div class="col-lg-3">
                        <h5>袜子</h5>
                    </div>
                    <div class="col-lg-3">
                        <input type="number" name="m" id="Jian" value="1" class="form-control" onchange="num(this)"/>
                    </div>
                    <div class="col-lg-3">
                        <h5>25</h5>
                    </div>
                </header>
                <header class="row">
                    <div class="col-lg-3 ck">
                        <input type="checkbox" name="ck" id="" value="2" onchange="ckb();" />
                    </div>
                    <div class="col-lg-3">
                        <h5>帽子</h5>
                    </div>
                    <div class="col-lg-3">
                        <input type="number" name="m" id="Jian" value="1" class="form-control" onchange="num(this)"/>
                    </div>
                    <div class="col-lg-3">
                        <h5>222</h5>
                    </div>
                </header>
                <header class="row">
                    <div class="col-lg-3 ck">
                        <input type="checkbox" name="ck" id="" value="3" onchange="ckb();" />
                    </div>
                    <div class="col-lg-3">
                        <h5>鞋子</h5>
                    </div>
                    <div class="col-lg-3">
                        <input type="number" name="m" id="Jian" value="1" class="form-control" onchange="num(this)"/>
                    </div>
                    <div class="col-lg-3">
                        <h5>854</h5>
                    </div>
                </header>
                <header class="row">
                    <div class="col-lg-3 ck">
                        <input type="checkbox" name="ck" id="" value="4" onchange="ckb();" />
                    </div>
                    <div class="col-lg-3">
                        <h5>儿子</h5>
                    </div>
                    <div class="col-lg-3">
                        <input type="number" name="m" id="Jian" value="1" class="form-control" onchange="num(this)"/>
                    </div>
                    <div class="col-lg-3">
                        <h5>95</h5>
                    </div>
                </header>
                <footer class="row" style="display: block; text-align: center;">                        
                    <p class="form-control" style="background: salmon;">
                        总件数：&nbsp; &nbsp;
                        <span id="span1" style="color: red;"></span>
                        &nbsp; &nbsp;件
                    </p>
                </footer>
                <footer class="row" style="display: block; text-align: center;">                        
                    <p class="form-control" style="background: salmon;">
                        总金额 ：&nbsp; &nbsp;
                        <span id="span2" style="color: red;"></span>
                        &nbsp; &nbsp;元
                    </p>
                </footer>
            </div>
        </div>
    </div>
</body>

Answer 1

如果用原生js，你给每一个input加一个输入事件oninput或者kepup，循环，然后解决你转换类型的话，用隐式也行就是*1，或者Number(),或者化为正数都行;如果用vue更简单