根据基于JQuery的Contact-Form-7中选中的复选框数计算

Question

我正在建立一个表单，用户应该在复选框中键入数字和选择选项。最后，我想对输入进行计算，并将它们显示给用户。我发现一个教程为我指明了正确的方向，here。这样，我就能够根据用户的输入值进行简单的计算。现在，我想根据选中的复选框的数量进行更复杂的计算。在我的代码中，我有字段"number“、"group1”、"group2“。结果应该显示在“复杂数学”下。

以下是到目前为止的表单代码：

<label>
  number: 
</label>
[number sample id:no min:1 max:1000]

<label>
group1:
</label>
[checkbox group1 id:g1 "p1" "p2" "p3"]

<label>
group2:
</label>
[checkbox group2 id:g2 "t1" "t2" "t3"]

<label>
simple math: 
</label>
[text test1 id:simple]
<label>
complex math: 
</label>
[text test2 id:complex]


<script>
jQuery(document).ready(function(){
var no;
var g1;
var g2;
var simple;
var complex;
jQuery("#no").on("change", function() {
 no= this.value ;
 simple=no*10;
 jQuery("#simple").val(simple.toFixed()); 
});
});
</script>

我想要实现的是像complex-math=(number*group1*30)+(number*group2*100).这样的计算

因此，对于number=2、g1=2xchecked、g2=2xchecked，结果应该是520。

对如何实现这一点有什么想法吗？它不需要具有响应性。要在单击按钮时开始计算，也可以。

Answer 1

我会像这样编写你的函数，我会在代码片段之前分解它：

var calc = function() {
  var no = $('#no').val();
  var g1 = $('input[name="g1"]:checked').val();
  var g2 = $('input[name="g2"]:checked').val();

  var simple = no * 10;
  $('#simple').val(simple.toFixed());

  var complex = (no * g1 * 30) + (no * g2 * 100);
  $('#complex').val(complex.toFixed());
}

$('#no, input[name="g1"], input[name="g2"]').on('change', function() {
  calc();
});

我不认为有必要在计算之外存储实际值，除非您需要它。因为没有submit按钮，所以只在数字更改时更新计算值是没有意义的，而是在任何输入更改时更新。当用户更改输入时执行的单个计算函数更有意义。然后，它只是获得在计算中使用的各个值。由于复杂的公式，我假设这些组实际上应该是单选按钮。

​

var calc = function() {
  var no = $('#no').val();
  var g1 = $('input[name="g1"]:checked').val();
  var g2 = $('input[name="g2"]:checked').val();
  
  var simple = no * 10;
  $('#simple').val(simple.toFixed());

  var complex = (no * g1 * 30) + (no * g2 * 100);
  $('#complex').val(complex.toFixed());
}

$('#no, input[name="g1"], input[name="g2"]').on('change', function() {
  calc();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>number:</label>
<input id="no" type="number" min="1" max="1000" />

<br />

<span>group1:</span>
<label><input name="g1" type="radio" value="1" checked />p1</label>
<label><input name="g1" type="radio" value="2" />p2</label>
<label><input name="g1" type="radio" value="3" />p3</label>

<br />
<span>group2:</span>
<label><input name="g2" type="radio" value="1" checked />t1</label>
<label><input name="g2" type="radio" value="2" />t3</label>
<label><input name="g2" type="radio" value="3" />t3</label>

<br />

<label>simple math: </label>
<input id="simple" type="text" />

<br />

<label>complex math: </label>
<input id="complex" type="text" />

​