Javascript 选择值时显示值的总和

Javascript 选择值时显示值的总和,javascript,php,mysql,html,Javascript,Php,Mysql,Html,我有一个由数据库查询生成的值列表。 我想查看用户(通过复选框)选择的值的总和 复选框的代码: <?php $i = -1; while ($row = mysql_fetch_array($res)) { $i++; ?> echo '<table> <tr> <td><input type="checkbox" onclick="bedrag_optellen(this, <?php echo $i ?>);" value=

我有一个由数据库查询生成的值列表。 我想查看用户(通过复选框)选择的值的总和

复选框的代码:

<?php
$i = -1;
while ($row = mysql_fetch_array($res))
{
$i++;
?>
echo '<table>
<tr>
<td><input type="checkbox" onclick="bedrag_optellen(this, <?php echo $i ?>);" value= "'.$row['bedrag_incl'].'"></td>
<td>&euro; '.number_format($row['bedrag_incl'], 2, ',', ' ').'</td>
</tr>
</table>';
}
?>

回声'
看看这个

我使用jQuery是因为它提供了简单性

我做了以下修改:

  • 在复选框中添加了类
    成本
  • 删除了
    onClick
    属性
  • 添加了jQuery
  • 要使代码在您的系统中工作,请将下面的代码添加到您的


    您可以添加演示/小提琴吗?什么是
    formElement
    ?你为什么不做
    elems[i]
    而不是
    formElement['bedrag\u optellen[]][i]
    ?有一个错误:
    formElement['bedrag\u optellen[]][i]。checked=true
    -你不是在比较,而是在设置。必须是
    ==
    。在JavaSciptHank的内容之前关闭脚本标记。当我将代码复制到系统时,您的代码似乎不起作用。您需要将jquery库添加到
    中。更新了答案。我正在使用其他脚本,这样就不会出现问题,因为jquery库已经存在。那么代码应该可以工作了。它在我的系统和JSFIDLE上工作。您的系统面临什么问题?仍然存在相同的问题,无法使其正常工作,但也没有错误。
    <table>
    <tr>
    <td width="51"><input type="text" id="bedragen_selected" name="bedragen_selected" value="" size="10" style="text-align:right;background-color: #e7e7e9" readonly="readonly" /></td>
    </tr>
    </table>
    
    <script type="text/javascript"</script>
    function bedrag_optellen(checkbox, nr)
    {
            var i, totaal = 0;
            var elems = document.getElementsByName('bedrag_optellen[]');
            var l = elems.length;
            for(i=0; i<l; i++)
            {
                if(formElement['bedrag_optellen[]'][i].checked = true)
                {
                     totaal += parseFloat(elems[i].value) || 0;
                 }
    
                document.getElementById('bedragen_selected').value = totaal.toFixed( 2 );
            }
    }
    </script>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <table>
    <tr>
        <td><input class='cost' type="checkbox" value= "8"></td>
        <td>&euro; 8</td>
    </tr>
    <tr>
        <td><input class='cost' type="checkbox"  value= "3"></td>
        <td>&euro; 3</td>
    </tr>
    <tr>
        <td><input class='cost' type="checkbox" value= "19"></td>
        <td>&euro; 19</td>
    </tr>
    <tr>
        <td><input class='cost' type="checkbox" value= "2"></td>
        <td>&euro; 2</td>
    </tr>
    <tr>
        <td><input class='cost' type="checkbox" value= "15"></td>
        <td>&euro; 15</td>
    </tr>
    <tr>
        <td><input class='cost' type="checkbox" value= "12"></td>
        <td>&euro; 12</td>
    </tr>
    </table>
    
    <table>
    <tr>
    <td width="51"><input type="text" id="bedragen_selected" name="bedragen_selected" value="" size="10" style="text-align:right;background-color: #e7e7e9" readonly="readonly" /></td>
    </tr>
    </table>
    
    var sum = 0;
    
    $('.cost').click(function() {
        if($(this).is(':checked')) {
            sum = sum + parseInt($(this).val());
        } else {
            sum = sum - parseInt($(this).val());
        }
        $('#bedragen_selected').val(sum);
    });