基于基于JQuery的Contact-Form-7中选中的复选框数量的计算 [英] Calculation based on number of checkboxes checked in Contact-Form-7 based on JQuery

问题描述

我正在构建一个表单，用户应在其中键入数字并在复选框中选择选项.最后，我想根据输入进行计算并将其显示给用户.我找到了一个指导我正确方向的教程

I am building a form where users should type in numbers and select options in checkboxes. At the end I want to make calculations out of the inputs and display them to the user. I found a tutorial pointing me in the right direction here. With that I was able to do a simple calculation based on an input value of a user. Now I want to do a more complex calculation based on the number of checkboxes that are checked. In my code I have the fields "number", "group1", "group2". The results should be shown under "complex math".

这是到目前为止的表单代码:

Here is the form code so far:

<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>

我想实现的是像复数=(number * group1 * 30)+(number * group2 * 100)这样的计算.

What I like to achieve is a calculation like complex-math=(number*group1*30)+(number*group2*100).

因此对于number = 2，g1 = 2xchecked，g2 = 2xchecked的结果应为520.

So for number=2 ,g1=2xchecked,g2=2xchecked the results should be 520.

关于如何实现这一目标的任何想法?它不必一定是响应性的.要在按钮上开始计算，也可以.

Any ideas on how to achieve that? It does not need to be necessarily responsive. To start the calculation on a button click would be ok,too.

推荐答案

我将这样编写您的函数，然后在代码段代码之前将其分解:

I would write your function as such, and I'll break it down before the snippet code:

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();
});

除非您需要，否则我认为不需要在计算之外存储实际值.由于没有提交按钮，因此仅在数字更改时更新计算值，而在任何输入更改时更新计算值都没有意义.每当用户更改输入时执行的单个计算功能就更有意义了.然后就是获取要在计算中使用的各个值.由于公式复杂，我认为这些组实际上是 个单选按钮.

I don't think there's a need to store the actual values outside of the calculation unless you need it. Since there's no submit button it didn't make sense to only update the calculated values on number change but on any of the input changes. A single calculation function that executes whenever the user changes the input makes more sense. Then it's just about getting the individual values to use in calculation. Because of the complex formula I assumed the groups are actually supposed to be radio buttons.

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" />

这篇关于基于基于JQuery的Contact-Form-7中选中的复选框数量的计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！