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

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

jquery html checkbox

Jquery 如何查看和添加价格取决于单击的复选框,jquery,html,checkbox,Jquery,Html,Checkbox,如何在Total字段中查看选中复选框的价格。例如，用户选中价格为$20的价格1，则$20将自动添加到Total字段，而无需刷新页面并显示它。然后用户还将检查价格为$30的价格2，然后将其添加到Total字段。那么，如果用户改变主意，取消选择价格2，那么现在的总价将只包含价格1的值，即20美元如果用户取消选中所有复选框，则“总计”字段必须为零，因为未选择任何内容。（不刷新页面）这是我的html代码： <form action="" method="post"> &l

如何在Total字段中查看选中复选框的价格。例如，用户选中价格为$20的价格1，则$20将自动添加到Total字段，而无需刷新页面并显示它。然后用户还将检查价格为$30的价格2，然后将其添加到Total字段。那么，如果用户改变主意，取消选择价格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>


价格1

价格2

价格3




总数：

我不知道它的代码。感谢您的帮助

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

  updateTotal();

});

function updateTotal(){
  var total = 0;

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


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

  })


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

试试这段代码

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


价格1

价格2

价格3




总数：
$（函数（）{
//将更改事件绑定到复选框
$（'input[name=“checkbox1”]”）。更改（函数（）{
var合计=0；
//从每个选定的复选框中获取值
$（'input[name=“checkbox1”]：checked'）。每个（函数（）{
var tval=$（this.val（）；
//从值中删除$符号
//把它换成牙签
//加上总数
总计+=解析浮点（tval.replace（“$”，”）；
});
//最后用$符号显示总数
$（'input[name=“total”]）.val（“$”+total）；
});
});

演示：

谢谢您的帮助。你的代码工作得很好！我也理解它是如何工作的。谢谢！

$( ":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);
}