Как правильно сделать калькулятор с чекбоксами?

Question

[makedonets]

Добрый день. Есть форма

<form>
<fieldset>
    <legend>Производство?</legend>
    <label for="rf">РФ</label><input type="radio" id="rf">
    <label for="import">Импорт</label><input type="radio" id="import">
 </fieldset>
 <fieldset>
    <legend>Срочный ремонт?</legend>
    <label for="nofast">Не срочный</label><input type="radio" id="nofast">
    <label for="fast">Срочный</label><input type="radio" id="fast">
 </fieldset>
 <fieldset>
    <legend>Тип двигателя</legend>
    <label for="one">Однофазный (220вт)</label><input type="radio" id="one">
    <label for="third">Трехфазный (380вт)</label><input type="radio" id="third">
 </fieldset>
 <fieldset>
    <legend>Дополнительные опции</legend>
    <label for="1">электродвигатели взрывозащищенного исполнения без ремонта элементов взрывозащиты </label><input type="checkbox" value="1.5" id="1">
	<label for="2">снятие муфт, шкивов с вала, шестерни и т. д. </label><input type="checkbox" value="1.1" id="2">
	<label for="3">ремонт электродвигателей устаревшей конструкции </label><input type="checkbox" value="1.2" id="3">
	<label for="4">ремонт вибраторов, мотор барабан</label><input type="checkbox" value="1.5" id="4">
    <label for="5">ремонт гидротолкателей </label><input type="checkbox" value="1.8" id="5">
	<label for="6">двухскоростных однообмоточных </label><input type="checkbox" value="1.2" id="6">
	<label for="7"> двухскоростных двухобмоточных </label><input type="checkbox" value="1.5" id="7">
	<label for="8">отсутствие обмотки в статореэлектродвигателя</label><input type="checkbox" value="1.2" id="8">
	<label for="9">трех- и четырехскоростные</label><input type="checkbox" value="1.4" id="9">
	<label for="10">ремонт крановых и металлургических эл.дв. в случаи выхода из строя и статора и ротора</label><input type="checkbox" value="1.8" id="10">
	<label for="11">ремонт  насоса типа Гном </label><input type="checkbox" value="1.3" id="11">
	<label for="12">установка подшипников SKF и другого оборудования по согласованию с заказчиком. </label><input type="checkbox" value="1.3" id="12">
	<label for="13">сложный ремонт </label><input type="checkbox" value="1.3" id="13">
	</fieldset>	
</form>
<div id="result"></div>

Необходимо сделать калькулятор что бы определенное число при выборе чекбокса умножалось на value. Как лучше сделать, чекбоксов довольно много и проверять через if каждый не вариант.

Answer 1

[Владимир Проскурин]

Ищите все активные чекбоксы

document.querySelectorAll('form input[type="checkbox"]:checked')

проходитесь по каждому чекбоксу, извлекаете из него строку с value, превращаете в число и умножаете на исходное число.

Comments

[makedonets]

Немного подкорректировал ваш скрипт под свои нужды. Получилось вот так

$('#power').html(data.map(n => `<option>${n['Мощность']}</option>`).join('')).val(null);
$('#number').html(Object.keys(data[0]['Частота вращения']).map(n => `<option>${n}</option>`).join('')).val(null);
$('#selects').change(function() {
  const
    power = $('#power').val(),
    number = $('#number').val();

  if (person && key) {
 // $('#result').text(data.find(n => n['Мощность'] === power)['Частота вращения'][number]);
    var checkres = data.find(n => n['Мощность'] === power)['Частота вращения'][number];
  }
  // alert (checkres);
$('.check').click(function () {
	$('.check:checked').each(function () {
  	var price = $(this).val();
    checkres *= price;
  });
$('#result').text(checkres)
});
});

Немного запутался, не получает вывести в блок переменную checkres. В нее при выборе чекбоксов как будто массив с произведениям записывается

[makedonets]

Ошибку нашел, спасибо

Answer 2

[r_mustang]

$('input[type="checkbox"]).forEach(function() {
  if ($(this).prop('checked'))
    математика * $(this).val();
});

Answer 3

[makedonets]

видел несколько примеров где на чекбокс вешали онклик с вызовом функции. Что скажете по этому способу?

Comments

[r_mustang]

делайте, как вам удобнее