计算复选框选择的总价值

时间:2017-10-29 17:33:35

标签: javascript jquery checkbox

我试图找出基于使用复选框选择5种不同选择的组合来计算总值的最佳方法。这是代码示例:

<input type="checkbox" value="Value 1" name="Value1" id="Value1">Value 1
<input type="checkbox" value="Value 2" name="Value2" id="Value2">Value 2
<input type="checkbox" value="Value 3" name="Value3" id="Value1">Value 3
<input type="checkbox" value="Value 4" name="Value4" id="Value1">Value 4
<input type="checkbox" value="Value 5" name="Value5" id="Value1">Value 5
<input type="checkbox" value="Total Value" name="TotalValue"
id="TotalValue">Total Value

以下是复选框的示例数值: 复选框1 - 100 复选框2 - 125 复选框3 - 150 复选框4 - 175 复选框5 - 200

所以我的目标是根据复选框选择为TotalValue提供一个数字值。例如,如果选中Checkbox 2和Checkbox 4,则Total Value将为300.因此,用户可以选择单个复选框或复选框的任意组合。我可以使用javascript做到这一点,但代码将非常繁琐和冗长。所以想知道是否有使用jQuery的简化方法。任何帮助将不胜感激。谢谢。

2 个答案:

答案 0 :(得分:1)

您可以使用 import base64 import re def find_between_r( s, first, last ): try: start = s.rindex( first ) + len( first ) end = s.rindex( last, start ) return s[start:end] except ValueError: return "" text='192.168.1.23 - - [18/Jun/2015:12:16:12 +0200] "GET /admin/?action=membres&order=QVNDLChzZWxlY3QgKGNhc2UgZmllbGQoY29uY2F0KHN1YnN0cmluZyhiaW4oYXNjaWkoc3Vic3RyaW5nKHBhc3N3b3JkLDE3LDEpKSksMSwxKSxzdWJzdHJpbmcoYmluKGFzY2lpKHN1YnN0cmluZyhwYXNzd29yZCwxNywxKSkpLDIsMSkpLGNvbmNhdChjaGFyKDQ4KSxjaGFyKDQ4KSksY29uY2F0KGNoYXIoNDgpLGNoYXIoNDkpKSxjb25jYXQoY2hhcig0OSksY2hhcig0OCkpLGNvbmNhdChjaGFyKDQ5KSxjaGFyKDQ5KSkpd2hlbiAxIHRoZW4gVFJVRSB3aGVuIDIgdGhlbiBzbGVlcCgyKSB3aGVuIDMgdGhlbiBzbGVlcCg0KSB3aGVuIDQgdGhlbiBzbGVlcCg2KSBlbmQpIGZyb20gbWVtYnJlcyB3aGVyZSBpZD0xKQ%3D%3D HTTP/1.1" 200 1007 "-" "-"' result = re.search('order=(.*) H', text) t=result.group(1) print(base64.b64decode(t)) #with open("26828869_ch13.txt","rt") as in_file: # for line in in_file: 选择目标div中的所有复选框,并使用$("#mainDiv input:checkbox")事件计算任何更改时检查输入的总值。你可以实现如下。

&#13;
&#13;
.on("change")
&#13;
$('document').ready(function() {
  $("#mainDiv input:checkbox").on("change", function(){
    var totalValue = 0;
    $('#mainDiv :checked').each(function() {
        totalValue += parseInt(($(this).val()));
    });
    
    $("#TotalValue").val(totalValue)
  })
  

});
&#13;
&#13;
&#13;

答案 1 :(得分:0)

尝试以下

&#13;
&#13;
$('document').ready(function() {

  $('#TotalValue').on('click', function() {
    var sList = 0;

    $('#mainDiv :checked').each(function() {
      sList += parseInt(($(this).val()));
    });


    console.log(sList);

  })

});
&#13;
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id="mainDiv">
  <input type="checkbox" value="1" name="Value1" id="Value1">Value 1
  <input type="checkbox" value="2" name="Value2" id="Value2">Value 2
  <input type="checkbox" value="3" name="Value3" id="Value1">Value 3
  <input type="checkbox" value="4" name="Value4" id="Value1">Value 4
  <input type="checkbox" value="5" name="Value5" id="Value1">Value 5
</div>
<button value="Total Value" name="TotalValue" id="TotalValue">Total Value</button>
&#13;
&#13;
&#13;