Расчет основан на количестве флажков, отмеченных в Contact-Form-7 на основе JQuery

Question

Я создаю форму, в которой пользователи должны вводить цифры и выбирать опции в флажках.В конце я хочу сделать расчеты из входных данных и отобразить их для пользователя.Я нашел учебник, указывающий мне правильное направление здесь .С этим я смог сделать простой расчет, основанный на входных данных пользователя.Теперь я хочу сделать более сложный расчет, основанный на количестве флажков, которые проверены.В моем коде у меня есть поля «число», «группа1», «группа2».Результаты должны отображаться в разделе «сложная математика».

Вот код формы, который был до сих пор:

<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) + (число * group2 * 100).

Таким образом, для числа = 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();
});

Я не думаю, что есть необходимость хранить фактические значения вне расчета, если тольковам это нужно.Поскольку кнопки отправки нет, не имеет смысла обновлять только вычисленные значения при изменении числа, но при любом изменении ввода.Отдельная функция вычисления, которая выполняется всякий раз, когда пользователь изменяет ввод, имеет больше смысла.Тогда речь идет только о получении отдельных значений для использования в расчете.Из-за сложной формулы я предположил, что группы на самом деле должны быть переключателями.

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