在JS中點擊複選框時顯示總價格

Question

我正在進行檢查表單分配。所以，我有3個產品的價格和類型是複選框。總字段將僅顯示已檢查產品的總成本。但是，當我點擊複選框時，總場不顯示任何內容。我錯過了什麼嗎？任何想法？謝謝！我的HTML和JS：

<form action="" id="theForm"> 
     <fieldset> 
      <legend> 
       Products 
      </legend> 
      <label> 
       <input name="product" value="12.95" type="checkbox" id="p1" onclick="total()"/> 
       Candy $12.95 
      </label> 
      <label> 
       <input name="product" value="5.99" type="checkbox" id="p2" onclick="total()"/> 
       Burger $5.99 
      </label> 
      <label> 
       <input name="product" value="1.99" type="checkbox" id="p3" onclick="total()"/> 
       Coke $1.99 
      </label> 
      <label> 
       Total 
       <input value="$0.00" readonly="readonly" type="text" id="total"/> 
      </label> 
     </fieldset> 
     <input value="Submit" type="submit"/> 
     <input value="Reset" type="reset"/> 
    </form> 

JS

function total() { 
     var input = document.getElementById("form"); 
     var total = 0; 
     for (var i = 0; i < input.length; i++) { 
       if (input[i].checked) { 
         total += parseFloat(input[i].value); 
       } 
     } 
     document.getElementById("total").value = "$" + total; 
} 

Answer 1

三個問題

1：使用document.getElementsByName("product");
2：重命名功能。似乎使用total作爲該字段的ID會干擾同名的功能。
3：回合的結果

function totalIt() { 
 
    var input = document.getElementsByName("product"); 
 
    var total = 0; 
 
    for (var i = 0; i < input.length; i++) { 
 
    if (input[i].checked) { 
 
     total += parseFloat(input[i].value); 
 
    } 
 
    } 
 
    document.getElementById("total").value = "$" + total.toFixed(2); 
 
}

<form action="" id="theForm"> 
 
     <fieldset> 
 
      <legend> 
 
       Products 
 
      </legend> 
 
      <label> 
 
       <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/> 
 
       Candy $12.95 
 
      </label> 
 
      <label> 
 
       <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/> 
 
       Burger $5.99 
 
      </label> 
 
      <label> 
 
       <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/> 
 
       Coke $1.99 
 
      </label> 
 
      <label> 
 
       Total 
 
       <input value="$0.00" readonly="readonly" type="text" id="total"/> 
 
      </label> 
 
     </fieldset> 
 
     <input value="Submit" type="submit"/> 
 
     <input value="Reset" type="reset"/> 
 
    </form>

Answer 2

這條線......

var input = document.getElementById("form"); 

會只與form的ID返回一個元素 - 而這樣的元素沒有按」你的例子中甚至都存在。什麼你要找的是...

var inputs = document.getElementsByName("product"); 

Answer 3

window.calculate = function(){ 
 
    var total = 0; 
 
    var form = document.getElementById("theForm"); 
 
    var inputs = form.getElementsByTagName("input"); 
 
    
 
    for(var i = 0; i < inputs.length; i++){ 
 
     if(inputs[i].getAttribute("name") == "product" && inputs[i].checked) 
 
      total += parseFloat(inputs[i].value); 
 
    } 
 
    alert(total); 
 
}

<form action="" id="theForm"> 
 
     <fieldset> 
 
      <legend> 
 
       Products 
 
      </legend> 
 
      <label> 
 
       <input name="product" value="12.95" type="checkbox" id="p1" onclick="calculate()"/> 
 
       Candy $12.95 
 
      </label> 
 
      <label> 
 
       <input name="product" value="5.99" type="checkbox" id="p2" onclick="calculate()"/> 
 
       Burger $5.99 
 
      </label> 
 
      <label> 
 
       <input name="product" value="1.99" type="checkbox" id="p3" onclick="calculate()"/> 
 
       Coke $1.99 
 
      </label> 
 
      <label> 
 
       Total 
 
       <input value="$0.00" readonly="readonly" type="text" id="total"/> 
 
      </label> 
 
     </fieldset> 
 
     <input value="Submit" type="submit"/> 
 
     <input value="Reset" type="reset"/> 
 
    </form>