Javascript 选中“计算总金额”复选框

HTML

<div id="catlist">
    <input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/>
    <input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/>
    <input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/>
    <input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/>
    <input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/>
    <input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/>
    <input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/>
    <input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/>
    <input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0"  />

我得到了特别的价值。为什么？我尝试了总和，我尝试了jquery，但没有成功

• 使用

  $（'#catlist:checkbox:checked'）

  选择器选择

  选中的
  复选框

• []

  用作

  属性选择器

  ，它可以用作

  “[type=“checkbox”]”

  ，但它不会过滤

  选中的
  复选框

• +

  运算符在

  parseFloat

  之前不需要，它必须是

  total=+

• 不要调用处理程序，只需使用

  .change（）

函数calcAndShowTotal（）{
var合计=0；
$（'#catlist:checkbox:checked'）。每个（函数（）{
总计+=parseFloat（$（this）.attr（'price'））| | 0；
});
$（'总计'）.val（总计）；
}
$（'#catlist:checkbox'）.change（calcAndShowTotal.change（）

第一类


第2类


第3类


第4类


第5类


第6类


第7类


第8类


第9类

使用
$（'#catlist:checkbox:checked'）
选择器选择
选中的
复选框

[]
用作
属性选择器
，它可以用作
“[type=“checkbox”]”
，但它不会过滤
选中的
复选框

+
运算符在
parseFloat
之前不需要，它必须是
total=+
不要调用处理程序，只需使用
.change（）


函数calcAndShowTotal（）{
var合计=0；
$（'#catlist:checkbox:checked'）。每个（函数（）{
总计+=parseFloat（$（this）.attr（'price'））| | 0；
});
$（'总计'）.val（总计）；
}
$（'#catlist:checkbox'）.change（calcAndShowTotal.change（）

第一类


第2类


第3类


第4类


第5类


第6类


第7类


第8类


第9类
您可以使用循环代替循环，循环将响应并更改复选框上的事件。此外，您还需要像这样对值进行加法或减法运算。
+=
对减法运算。
-=

var _total = 0;
$('input[type="checkbox"]').change(function() {
  if($(this).is(':checked')){
  _total += parseFloat($(this).attr('price')) || 0;
  }
else{
  _total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})

您可以使用循环代替循环，循环将响应并更改复选框上的事件。此外，您还需要像这样对值进行加法或减法运算。
+=
对减法运算。
-=

var _total = 0;
$('input[type="checkbox"]').change(function() {
  if($(this).is(':checked')){
  _total += parseFloat($(this).attr('price')) || 0;
  }
else{
  _total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})

哪里是
#价格表
？它应该是
+=
而不是
+=/code>哪里是
#价格表
？它应该是
+=
而不是
+=/code>，请编辑更多信息。不鼓励只编写代码和“尝试此”答案，因为它们不包含可搜索的内容，并且不解释为什么有人应该“尝试此”。请使用更多信息进行编辑。不鼓励只编写代码和“试试这个”答案，因为它们不包含可搜索的内容，也不解释为什么有人应该“试试这个”。
$('input:checkbox').change(function(){
var totalprice=0;
$('input:checkbox:checked').each(function(){
totalprice+= parseFloat($(this).attr('price'));
});
$('#total').val(totalprice)
});