选择值时显示总值

问题描述 投票:1回答:1

我有一个包含值的列表,该值是由数据库查询生成的。我想查看用户(通过复选框选中)的总值。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9yUjlrNS5wbmcifQ==” alt =“在此处输入图像描述”>

复选框代码:

<?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>';
}
?>

输出字段的代码:

<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>

JavaScript

<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>

代码不起作用,也没有给出错误。

有人可以帮助我吗?

https://jsfiddle.net/fawavmbo/

javascript php mysql html5
1个回答
1
投票

检查此fiddle

为了简化起见,我使用了jQuery。

我进行了以下更改:

  1. 向复选框添加了类别cost
  2. 已删除onClick属性。
  3. 添加了jQuery。

为了使代码在您的系统中正常工作,请将以下代码添加到<head>中>

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

这是代码段。

HTML

<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>

JS

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);
});
© www.soinside.com 2019 - 2024. All rights reserved.