jQuery，计算文本框值的总和

所以这里是问题所在。我有两个复选框，两个文本框，最后一个最后一个文本框。我想要做的是这样的：当复选框1被选中时，它旁边的文本框的值为8.当复选框2被选中时，它旁边的文本框的值为7。然后最后最后的文本框显示文本框的总和，在这种情况下，应该是15。jQuery，计算文本框值的总和

我试过这个：只给文本框值与if语句。然后为这两个文本框提供一个“文本框”类，并只计算它们的总和。我能够通过if语句获取值，但无法获得最终的总和。

$(function(){ 
    $('#checkbox1').click(function(){ 
    if (this.checked) { 
     $('#textbox1').val(7); 
    } 
    }); 
    $('#checkbox2').click(function(){ 
    if (this.checked) { 
     $('#textbox2').val(8); 
    } 
    }); 

var total = 0; 
    $('.textboxes').each(function() { 
     total += Number($(this).val()); 
    }); 
    $('#totalSum').val(total); 

});

来源

2014-09-18 Klisee

总计只在页面加载时计算一次，并计算0.您要做的是每次更改输入时更新总计。您可以通过使总的函数，然后调用做到这一点从点击回调

$(function(){ 
 
    $('#checkbox1').click(function(){ 
 
    if (this.checked) { 
 
     $('#textbox1').val(7); 
 
     updateTotal(); 
 
    } 
 
    }); 
 
    $('#checkbox2').click(function(){ 
 
    if (this.checked) { 
 
     $('#textbox2').val(8); 
 
     updateTotal(); 
 
    } 
 
    }); 
 

 
    function updateTotal(){ 
 
    \t var total = 0; 
 
    \t $('.textboxes').each(function() { 
 
    \t total += Number($(this).val()); 
 
    \t }); 
 
    \t $('#totalSum').val(total); 
 
    } 
 
    updateTotal(); 
 
});

.textboxes{ 
 
\t width: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div> 
 
    <input class="textboxes" id="textbox1" /><input id="checkbox1" type="checkbox"/><br /> 
 
    <input class="textboxes" id="textbox2" /><input id="checkbox2" type="checkbox" /><br /> 
 
</div> 
 
<div><input id="totalSum"></div>

来源

2014-09-18 18:41:54

不错！谢谢。 – Klisee 2014-09-18 18:52:24

如果未选中复选框，它不会重新计算值... – 2014-09-18 18:55:59

@Alex Art-这真的超出了问题的范围。它也不使用阿贾克斯，独角兽或彩虹。重点是重新计算必须发生。 – 2014-09-18 18:57:39

编辑：更清洁，更可扩展的代码（适用于复选框的任何动态数）：

Fiddle

$(function(){ 
    $(':checkbox').click(function(){ 
     var textbox = $(this).next('input[type="text"]'); 
    if (this.checked) {  
     $(textbox).val($(this).data("number")); 
    } 
    else{ 
     $(textbox).val(""); 
    }  
    calculateTotal(); 
    }); 
}); 

function calculateTotal() 
{ 
    var total = 0;  
    $("input:checked").each(function(){ 
     var val = $(this).next('input[type="text"]').val(); 
     total += Number(val); 
    }); 

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

数据NUM ber属性添加到复选框：

<div> 
<input type="checkbox" id="checkbox1" data-number="7" /> 
<input type="text" id="textbox1" /> 
</div> 
<div> 
<input type="checkbox" id="checkbox2" data-number="8" /> 
<input type="text" id="textbox2" /> 
</div> 
<div> 
<input type="checkbox" id="checkbox3" data-number="9" /> 
<input type="text" id="textbox3" /> 
</div> 
<div> 
<input type="checkbox" id="checkbox4" data-number="10" /> 
<input type="text" id="textbox4" /> 
</div> 
<input type="text" id="totalSum" />

来源

2014-09-18 18:53:46

jQuery，计算文本框值的总和

回答

相关问题