复选框和jquery ajax

时间:2012-09-18 15:57:50

标签: php jquery ajax checkbox

我试图创建一个模块,其中每当选中复选框时,数据库中指示的价格将被添加到总费用中,结果将显示。如何从数据库(sql)获取值/插入php代码并显示所选框的结果?

<script>
function updateTextArea() { 
    var allVals = [];
    $('#c_b :checked').each(function() {
        allVals.push($(this).val());
    });
    $('#t').val(allVals)
}
$(function() {
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

的index.php

$queryPaymentLab = "select * from requestedlab where patient_ID='6' AND paid='0'";
$resultPaymentLab = mysql_query($queryPaymentLab);
$countRowsPaymentLab=mysql_num_rows($resultPaymentLab);

if($countRowsPaymentLab > 0){
while($fetchLab=mysql_fetch_array($resultPaymentLab)){
    $labservice_ID=$fetchLab['labservice_ID'];

    $queryPrice = "select * from labservices where labservice_ID='".$labservice_ID."'";
    $resultPrice = mysql_query($queryPrice);
    $fetchPrice=mysql_fetch_array($resultPrice);

    $labService=$fetchPrice['labService'];
    $labPrice=$fetchPrice['labPrice'];
    $totalLab+=$labPrice;
    $totalHBill+=$labPrice;

    echo "<tr><td><input type='checkbox' name='labservice_ID' value='$labservice_ID'/></td>
    <td>Laboratory</td><td>$labService</td><td>$totalHBill</td></tr>";
}
}

显示总费用..

 $queryPrice = "select * from labservices where labservice_ID='".$labservice_ID."'";
    $resultPrice = mysql_query($queryPrice);

    while($fetchPrice=mysql_fetch_array($resultPrice)){   
        $labPrice=$fetchPrice['labPrice'];
        $total+=$labPrice;
    }

    echo "<strong>Total:</strong>
    <strong>$total</strong>";

1 个答案:

答案 0 :(得分:0)

为什么不考虑使用HTML5 data属性?

HTML:

<?php 
// Use PHP to dynamically fetch the data-price values and generate the HTML below
?>
<span class="item" data-price="100">...</span>
<span class="item" data-price="90">...</span>
<span class="item" data-price="130">...</span>

USD: <span class="price">0</span>

JS:

function updateCost() {
    $('.item').each(
        function() {
            if ($(this).children('input:checkbox').is(':checked')) {
                var oldPrice = parseInt($('.price').text());
                var newPrice = oldPrice + parseInt($(this).data('price'));
                $('.price').text(newPrice);
            }
        }
    );
 }
  • 在每个复选框的updateCost()事件中致电onchange
  • 确保取消选中复选框会相应地从总价格中减去价格!
  • 不要忘记在提交时总计并查看价格,否则您很容易进行欺诈性购买!

这样可以避免不必要的Ajax,并且代码保持清晰。对不起,如果这不是您想要的,请告诉我,以便我能提供更好的帮助。

如果您有某种市场,其中成本本身正在实时更新,则需要一些外部帮助。对于市场,只需调用Ajax函数即可适当更新每个项目的data-price属性! :)