如何使用Javascript來保持選中的複選框總數並顯示它？

這段代碼不起作用，我不知道爲什麼。如何使用Javascript來保持選中的複選框總數並顯示它？

<html><body> 
<form> 
<input type="checkbox" name="a" onclick="updateTotal('a',5)">5<br> 
<input type="checkbox" name="b" onclick="updateTotal('b',3)">4<br> 
<input type="checkbox" name="c" onclick="updateTotal('c',4)">3<br> 
TOTAL: &pound; 
<script type="text/javascript"> 
    var total = 0; 
    function updateTotal(row, val){ 
      global total; 
      if (document.getElementByID(row_no).checked){ 
       total += price; 
      } 
      else { 
       total -= price; 
      } 
      document.write(+total); 
     } 
    } 
</script> 
</body> 
</html>

我該如何讓它按照我想要的方式工作？謝謝你的幫助。

來源

2015-12-03 Caspar Nonclercq

'price'沒有定義和'全球total'是無效的。這是JavaScript而不是PHP。 –

我希望這會對你有所幫助：[如何處理複選框]（http://stackoverflow.com/questions/14208022/how-to-show-javascript-confirm-box-when-checkbox-is-unchecked-然後如果用戶s） –

這是充滿了JS錯誤的...你可以點擊此處查看：http://www.jslint.com/

如果你想要的工作，你可以嘗試這樣的事情：

var total = 0; 
 
updateTotal = function (row, val){ 
 
    if (document.getElementById(row).checked){ 
 
     total += val; 
 
    } 
 
    else { 
 
     total -= val; 
 
    } 
 
    document.getElementById("total").innerHTML ="TOTAL: "+ total +"&pound;"; 
 
}

<form> 
 
    <input type="checkbox" id="a" onclick="updateTotal('a',5)">5<br> 
 
    <input type="checkbox" id="b" onclick="updateTotal('b',3)">4<br> 
 
    <input type="checkbox" id="c" onclick="updateTotal('c',4)">3<br> 
 
    <span id="total">TOTAL: &pound;</span> 
 
</form>

來源

2015-12-03 11:25:41 jolmos

謝謝，我實施了你的解決方案。我知道我的代碼充滿了一些小小的錯誤，而且我需要一段時間才能找到它們。感謝您分享您的知識。 –

checke this fiddle

var total = 0; 
function updateTotal(row, val){ 
    if (document.getElementById(row).checked){ 
     total += val; 
    } 
    else { 
     total -= val; 
    } 
    document.getElementById('total').innerHTML = total; 
}

來源

2015-12-03 11:26:49 gurvinder372

有很多問題。請看看這個小提琴：jsfiddle

var total = 0; 
function updateTotal(row, val) { 
    if (document.getElementById(row).checked) { 
     total += val; 
    } else { 
     total -= val; 
    } 
    console.log(total); 
}

來源

2015-12-03 11:28:04 miraco

有幾件事情需要你如改變。首先你將val傳遞給函數，但是使用價格。我用val代替價格。

在javascript中你不需要使用

global total;

總量將已經在函數內部訪問。

getElementById使用駱駝大小寫，javascript區分大小寫，所以最後一個字符需要小寫。您還需要爲複選框輸入一個ID，而不僅僅是一個名稱。

如果更新標記內的innerHTML而不是document.write，它將更新值而不是一個接一個地寫入一個值。你也有太多的括號。

<html><body> 
<script> 
    var total = 0; 
    function updateTotal(row, val){ 
      if (document.getElementById(row).checked){ 
       total += val; 
      } 
      else { 
       total -= val; 
      } 
      document.getElementById("price").innerHTML = total; 
     } 

</script> 
<form> 
<input type="checkbox" name="a" id="a" onChange="updateTotal('a',5)">5<br> 
<input type="checkbox" name="b" id="b" onChange="updateTotal('b',3)">4<br> 
<input type="checkbox" name="c" id="c" onChange="updateTotal('c',4)">3<br> 
TOTAL: &pound; <x id="price">0</x> 
</form> 
</body> 
</html>

來源

2015-12-03 11:36:34 user1320619

-1

我會做這種方式（使用jQuery）：

<html> 
<body> 
<form id="my_checkboxes"> 
<input type="checkbox" name="a" data-price="5">5<br> 
<input type="checkbox" name="b" data-price="4">4<br> 
<input type="checkbox" name="c" data-price="3">3<br> 
</form> 
<p>TOTAL: &pound;<span id="total_checked">0</span></p> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script type="text/javascript"> 
    var total = 0; 

    // Event handler for when a checkbox changes 
    $("#my_checkboxes input[type='checkbox']").change(function(e) { 
     // get all checked boxes 
     var checked = $("#my_checkboxes input[type='checkbox']:checked"); 

     // recalculate total 
     total = 0; 
     $.each(checked, function(index, value) { 
      total += Number($(this).attr("data-price")); 

     }); 

     // display new total value 
     $("#total_checked").html(total); 

    }); 
</script> 
</body> 
</html>

來源

2015-12-03 11:36:59 Benimation

如何使用Javascript來保持選中的複選框總數並顯示它？

回答

相關問題