Javascript从错误的复选框触发器获取总和

Question

下面是两个不同的复选框，下面的javascript似乎是由termsChkbx复选框触发的，而不是被选中的。 如何更改此部分

var chosen = item.parentElement.querySelector('[type="checkbox"]'); ?

echo "\t<div class='item'>
    <span class='CDTitle'>{$CD['CDTitle']}</span>
    <span class='CDYear'>{$CD['CDYear']}</span>
    <span class='catDesc'>{$CD['catDesc']}</span>
    <span class='CDPrice'>{$CD['CDPrice']}</span>
    <span class='chosen'><input type='checkbox' id='selectChkbx' name='CD[]' value='{$CD['CDID']}' title='{$CD['CDPrice']}' /></span>
    </div>\n";

<p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx" onchange="isChecked(this,'sub1')"/></p>

JS：

function createCheckbox(){
    var html = "";
    for(var i = 0; i<5; i++){
        var num = (Math.random() * 10).toFixed(2);
        html += "<input type='checkbox' class='chk' value='" +num+ "' onchange='updateTotal()'>" + num + "<br/>";
    }
    document.getElementById("selectChkbx").innerHTML = html;
}

function updateTotal(){
    var chk = document.getElementsByClassName("chk");
    var total = 0;
    console.log(chk);
    for(var i in chk){
        if(chk[i].checked){
            total+=parseFloat(chk[i].value);
        }
    }

    document.getElementById("total").innerHTML = total;
}

createCheckbox();

Answer 1

您可以尝试如下操作：

JSFiddle

码

 function createCheckbox(){ var html = ""; for(var i = 0; i<5; i++){ var num = (Math.random() * 10).toFixed(2); html += "<input type='checkbox' class='chk' value='" +num+ "' onchange='updateTotal()'>" + num + "<br/>"; } document.getElementById("content").innerHTML = html; } function updateTotal(){ var chk = document.getElementsByClassName("chk"); var total = 0; console.log(chk); for(var i in chk){ if(chk[i].checked){ total+=parseFloat(chk[i].value); } } document.getElementById("total").innerHTML = total.toFixed(2); } createCheckbox(); 

 <div id="content"></div> <p id="total">0</p> 

编辑1

我相信您无法获得价值的原因是因为元素结构。 您有一个span标签保存价格，另一个span标签保存复选框。 对于这种结构，您将不得不导航到该span并获取其值。 以下描述如下。

获取Span的价值

var price = chk[i].parentNode.previousSibling.textContent;

码

 function createCheckbox(){ var html = ""; for(var i = 0; i<5; i++){ var num = (Math.random() * 10).toFixed(2); html += "<span>" + num + "</span>"; html += "<span><input type='checkbox' class='chk' value='" +num+ "' onchange='updateTotal()'>Check</span><br/>"; } document.getElementById("content").innerHTML = html; } function updateTotal(){ var chk = document.getElementsByClassName("chk"); var total = 0; console.log(chk); for(var i in chk){ if(chk[i].checked){ var price = chk[i].parentNode.previousSibling.textContent; total += parseFloat(price); } } document.getElementById("total").innerHTML = total.toFixed(2); } createCheckbox(); 

 .chk{ } 

 <div id="content"></div> <p id="total">0</p>