Question

如何在“总计”字段中查看已选中复选框的价格。例如，用户以20美元的价格检查价格1，20美元将自动添加到“总计”字段，而不刷新页面并显示它。然后，用户还将以30美元的价格检查价格2，然后将其添加到“总计”字段中。然后，如果用户改变主意并取消选中价格2，那么现在的总价格将仅包含价格1的值20美元。

如果用户取消选中所有选中的复选框，则总字段必须为零，因为没有选择任何内容。（没有刷新页面）

这是我的HTML代码：

<form action="" method="post">
        <input type="checkbox" name="checkbox1" value="$20"> Price 1 </br>
        <input type="checkbox" name="checkbox1" value="$30"> Price 2 </br>
        <input type="checkbox" name="checkbox1" value="$40"> Price 3 </br>
        </br></br>
        Total: <input type="text" name="total" disabled="true">

</form>

我不知道它的代码。任何帮助表示赞赏。

Answer 1

$('input[type="checkbox"]').change(function(){

  updateTotal();

});

function updateTotal(){
  var total = 0;

  $('input[type="checkbox"]:checked').each(function(){


       total += parseFloat($(this).val())

  })


  $('#total').val('$ '+total);
}

http://jsfiddle.net/Ljovcz1y/1/

Answer 2

试试此代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <form action="" method="post">
        <input type="checkbox" name="checkbox1" value="$20"> Price 1 </br>
        <input type="checkbox" name="checkbox1" value="$30"> Price 2 </br>
        <input type="checkbox" name="checkbox1" value="$40"> Price 3 </br>
        </br></br>
        Total: <input type="text" name="total" disabled="true">
    </form>
    <script type="text/javascript">
    $(function(){
        //bind the change event to the checkboxes
        $('input[name="checkbox1"]').change(function(){
            var total = 0;
            //get value from each selected ckeck box
            $('input[name="checkbox1"]:checked').each(function(){
                var tval = $(this).val();
                //remove $ sign from value
                //convert it to a flot
                //plus it to the total
                total += parseFloat(tval.replace("$",""));                
            });
            //finally display the total with a $ sign
            $('input[name="total"]').val("$ " + total);
        });
    });
    </script>
</body>
</html>

Answer 3

$( ":checkbox" ).on('change', function(){
   makeSum(); 
});

function makeSum(){
    var totalVal = 0;
    $( ":checked" ).each(function(index, checkbox){
          totalVal += parseInt($(checkbox).val(), 10);
    });
    $('input[name="total"]').val("$" + totalVal);
}

演示：http://jsfiddle.net/9fe9wonx/

如何查看和添加价格取决于点击的复选框

3 个答案: