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>