Javascript 如何获取不同复选框的值，计算这些复选框的值并显示在输入字段中？

当选中不同复选框时，我在获取它们的值方面有点问题。这是我的密码

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
 $(document).ready(function(){
    $('input[type="checkbox"]').bind('click',function() 
    {
   var waterdm = $('#waterdm').val();
  $("#price").val(waterdm);
 });
});
</script>

<p><input type="checkbox" id="waterdm"  name="waterdm" value="10" />Water Damage</p>
<p><input type="checkbox" id="screendm" name="screendm" value="20" />Screen Damage</p>
<p><input type="checkbox" id="Chargerdm" name="Chargerdm" value="30" />Charger Damage</p>
<p><input type="checkbox" id="hdphdm" name="hdphdm" value="10" />Headphone Damage</p>

<p>
 Calculated Price: <input type="text" name="price" id="price" />
</p>

$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。绑定（'click'，function（）
{
var waterdm=$（'#waterdm'）.val（）；
美元（“#价格”）.val（水费）；
});
});
水损害

屏幕损坏

充电器损坏

耳机损坏


计算价格：

我想要的是，每当用户签入复选框时，我都需要获取这些值，并显示签入到另一个输入框中的每个复选框值的总和。这意味着我需要对每个复选框的值求和

---

当用户取消选中任何复选框时，该值应从该总数中减去。我在jquery方面没有足够的经验。请帮帮我。

您需要在复选框上迭代。当你用复选框说话时，

change

事件更有意义

使用上的

来附加事件，而不是
绑定

$(document).ready(function () {
    // cache the inputs and bind the events
    var $inputs = $('input[type="checkbox"]')
    $inputs.on('change', function () {
        var sum = 0;
        $inputs.each(function() {
        // iterate and add it to sum only if checked
           if(this.checked)
               sum += parseInt(this.value);
        });
        $("#price").val(sum);
    });
});

您需要遍历复选框。当你用复选框说话时，
change
事件更有意义

使用

上的

来附加事件，而不是
绑定

$(document).ready(function () {
    // cache the inputs and bind the events
    var $inputs = $('input[type="checkbox"]')
    $inputs.on('change', function () {
        var sum = 0;
        $inputs.each(function() {
        // iterate and add it to sum only if checked
           if(this.checked)
               sum += parseInt(this.value);
        });
        $("#price").val(sum);
    });
});

试试这个

 $(document).ready(function(){
   var waterdm=0;  
   $('input[type="checkbox"]').on('click',function() 
    {
    waterdm = waterdm+parseInt($(this).val());
    $("#price").val(waterdm);
 });
});

试试这个

 $(document).ready(function(){
   var waterdm=0;  
   $('input[type="checkbox"]').on('click',function() 
    {
    waterdm = waterdm+parseInt($(this).val());
    $("#price").val(waterdm);
 });
});

如果要对所有选中的复选框求和，请尝试以下操作：

$('input[type="checkbox"]').bind('click',function() 
    {
        var sum = 0;
        $('input[type="checkbox"]:checked').each(function(){
           var val = parseInt($(this).val());
           sum += val;
        });
       $("#price").val(sum);
 });

如果要对所有选中的复选框求和，请尝试以下操作：

$('input[type="checkbox"]').bind('click',function() 
    {
        var sum = 0;
        $('input[type="checkbox"]:checked').each(function(){
           var val = parseInt($(this).val());
           sum += val;
        });
       $("#price").val(sum);
 });


您可以使用以下代码

$(document).ready(function(){
    $('input[type="checkbox"]').click(function() 
    {
        var val = 0;
        $('input[type="checkbox"]:checked').each(function(){
            val+=parseInt($(this).val());
        });
          $("#price").val(val);
     });
});

您可以使用以下代码

$(document).ready(function(){
    $('input[type="checkbox"]').click(function() 
    {
        var val = 0;
        $('input[type="checkbox"]:checked').each(function(){
            val+=parseInt($(this).val());
        });
          $("#price").val(val);
     });
});

感谢您的回复，它正在工作，但我如何才能根据选中和未选中的值进行加减值？感谢您的解决方案，这真的很有帮助。：）很高兴能为您提供帮助：）谢谢您的回复，它可以正常工作，但我如何根据已检查和未检查的值进行加减值？谢谢您的解决方案，这真的很有帮助。：）很高兴我能帮上忙：）问题不应该在回答之后改变。问题不应该在回答之后改变。