Я действительно не знаю, как программировать в Javascript, но я пытался кое-что сделать. У меня есть значения, которые нужно суммировать, если некоторые из них выбраны. Следующая функция выполняет операцию суммирования и сразу показывает результат, не нажимая кнопку, только для полей checkbox, а не для списка dropdown и текстовых полей.
Однако мне нужно также задействовать выбранные значения из списков dropdown и ввести оба текстовых поля таким же образом, как checkboxes и их немедленные ответы (вывод).
Я думаю, что метод change можно использовать таким же образом.
@Редактировать:
Извините, я забыл сказать, но мне нужно умножить введенное значение m2 на перед суммированием с 3134,204499 и Бина Яси с -566,2202888.
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#housepriceguesslist :checkbox').change(calcAndShowTotal).change();<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "housepriceguesslist">
<select id = "ilce">
<option value = "0">Choose a state</option>
<option value = "63999.50712318567">Adalar</option>
<option value = "6259.918435398593">Ataşehir</option>
<option value = "46285.35729304834">Beykoz</option>
<option value = "54258.92953697798">Kadıköy</option>
<option value = "-3500.620905653726">Kartal</option>
<option value = "12889.41219909602">Maltepe</option>
<option value = "-33711.83156847153">Pendik</option>
<option value = "-34577.42485251657">Sancaktepe</option>
<option value = "-52183.1608811019">Sultanbeyli</option>
<option value = "-34760.71735007784">Tuzla</option>
<option value = "-27379.87966213786">Çekmeköy</option>
<option value = "-5332.203990418937">Ümraniye</option>
<option value = "26485.33532820411">Üsküdar</option>
<option value = "-18732.62070553167">Şile</option>
</select>
<select id = "odasalon">
<option value = "0">Choose room number</option>
<option value = "5940.027623576261">1+0</option>
<option value = "-1399.625767475593">1+1</option>
<option value = "-3033.638999060459">2+1</option>
<option value = "11519.83954756076">3+1</option>
<option value = "-7018.52116545078">4+1</option>
<option value = "-6008.081239150166">5+1</option>
</select>
m2: <input type = "text" id = "m2" /> Bina Yasi: <input type = "text" id = "binayasi" />
<br/>
<br/> Features:
<br/>
<br/>
<input type = "checkbox" id = "Bati" value = "Bati" price = "-783.4452683566533" /> <label for = "Bati">Bati</label>
<br/>
<input type = "checkbox" id = "Dogu" value = "Dogu" price = "-4895.732009084263" /> <label for = "Dogu">Dogu</label>
<br/>
<input type = "checkbox" id = "Guney" value = "Guney" price = "-2599.001349652765" /> <label for = "Guney">Guney</label>
<br/>
<input type = "checkbox" id = "Kuzey" value = "Kuzey" price = "3832.013070771234" /> <label for = "Kuzey">Kuzey</label>
<br/>
<input type = "checkbox" id = "Amerikan Mutfak" value = "Amerikan Mutfak" price = "2346.347889828301" /> <label for = "Amerikan Mutfak">Amerikan Mutfak</label>
<br/>
<input type = "checkbox" id = "Dusakabin" value = "Dusakabin" price = "-176.5092353740256" /> <label for = "Dusakabin">Dusakabin</label>
<br/>
<input type = "checkbox" id = "Akilli Ev" value = "Akilli Ev" price = "-4756.206384200719" /> <label for = "Akilli Ev">Akilli Ev</label>
<br/>
<input type = "checkbox" id = "Ebeveyn Banyosu" value = "Ebeveyn Banyosu" price = "10135.50644456019" /> <label for = "Ebeveyn Banyosu">Ebeveyn Banyosu</label>
<br/>
<input type = "checkbox" id = "Kiler" value = "Kiler" price = "-10693.49979821809" /> <label for = "Kiler">Kiler</label>
<br/>
<input type = "checkbox" id = "Kuvet" value = "Kuvet" price = "-941.0629741243247" /> <label for = "Kuvet">Kuvet</label>
<br/>
<input type = "checkbox" id = "Parke Zemin" value = "Parke Zemin" price = "-8453.847199707092" /> <label for = "Parke Zemin">Parke Zemin</label>
<br/>
<input type = "checkbox" id = "Seramik Zemin" value = "Seramik Zemin" price = "1545.025601000643" /> <label for = "Seramik Zemin">Seramik Zemin</label>
<br/>
<input type = "checkbox" id = "Sauna" value = "Sauna" price = "8677.708176289747" /> <label for = "Sauna">Sauna</label>
<br/>
<input type = "checkbox" id = "Spor Salonu" value = "Spor Salonu" price = "1159.884679563385" /> <label for = "Spor Salonu">Spor Salonu</label>
<br/>
<input type = "checkbox" id = "Tenis Kortu" value = "Tenis Kortu" price = "16065.26794172257" /> <label for = "Tenis Kortu">Tenis Kortu</label>
<br/>
</div>
<input type = "text" id = "total" value = "0" />Доступ к этому можно получить в JavaScript как this.dataset.price или $(this).data("price").
@snr Я добавил решение с учетом вашего последнего редактирования.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы можете перебрать все поля <select> и ввод текста с помощью:
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$("#housepriceguesslist select, #housepriceguesslist :text").each(function() {
let multiplier = 1;
if (this.id == "m2") {
multiplier = 3134.204499;
}
else if (this.id == "binayasi") {
multiplier = -566.2202888;
}
if (this.value) {
total += parseFloat(this.value) * multiplier;
}
});
$('#total').val(total);
}
И если вы измените флажки, чтобы использовать value вместо price, вы можете сделать их все в одном цикле:
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$("#housepriceguesslist select, #housepriceguesslist :text, #housepriceguesslist :checkbox:checked").each(function() {
let multiplier = 1;
if (this.id == "m2") {
multiplier = 3134.204499;
else if (this.id == "binyasi") {
multiplier = -566.2202888;
}
if (this.value) {
total += parseFloat(this.value) * multiplier;
}
});
$('#total').val(total);
}
И вызовите функцию при изменении любого из входных данных:
$('#housepriceguesslist input, #housepriceguesslist select').change(calcAndShowTotal).change();
Добавлю ли я фрагмент в конец метода javascript? Если нет, не могли бы вы объединить его с моим методом javascript?
Спасибо, сэр, но первый не работает. Я только что попробовал. Вы можете видеть это из liveweave.com/JpXff9 . Я сделал что-то неправильно?
Я не вижу вашего кода по этой ссылке. Как вы вызываете функцию? Вы должны вызвать его после того, как пользователь сделает выбор в меню.
Вы никогда не вызываете функцию там.
Извините, я только что увидел ваше последнее редактирование. Да, после звонка это работает довольно хорошо. Но не могли бы вы взглянуть на мой отредактированный вопрос? Не могли бы вы изменить его?
Я обновил ответ, но это действительно базовые вещи. Вам нужно либо научиться программировать, либо нанять кого-то, вы не сможете запустить веб-сайт, если вам нужно обращаться в Интернет за помощью в таких простых вещах, как эта.
На самом деле я сделал это поверх ответа @Karl, но я не знаю javascript, то, что я сделал, это jsfiddle.net/sonerstudent/0zo2npdc/2 . Но я не использовал this.id == "м2", так как не знаю this.id
Подобно Бармар, я добавил все элементы в цикл .each(), но также добавил обработчик .change() для всех элементов:
var context = $('#housepriceguesslist');
var elems = $('input:checkbox, input:text, select', context);
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
elems.each(function() {
if ( $(this).is('input:checkbox:checked') ) {
total += parseFloat($(this).attr('price')) || 0;
} else if ( $(this).is('#m2') ) {
total += parseFloat($(this).val()) * 3134.204499 || 0;
} else if ( $(this).is('#binayasi') ) {
total += parseFloat($(this).val()) * -566.2202888 || 0;
} else if ( $(this).is('select') ) {
total += parseFloat($('option:selected',this).val()) || 0;
}
});
$('#total').val(total);
}
elems.change(calcAndShowTotal); // handlers
calcAndShowTotal(); // first run
См. пример здесь: https://jsfiddle.net/qgvsern4/1/
Я обновил свой ответ (PS извините @Barmar за опечатку в вашем имени!)
Это решение простое, просто получите список всех входных данных (т. е. checkbox и dropdown), используя метод .find() и селектор 'input:checkbox, input:text, select'. Затем проверьте, имеет ли каждый из этих элементов inputs атрибут checked или select для типов ввода checkbox и select соответственно, или это множитель для входов text. Эта проверка может быть выполнена внутри обратного вызова метода each(). Наконец, просто преобразуйте значение в число, используя метод parseFloat(), и добавьте его в общий аккумулятор.
Наконец, суммируйте значение со входом total. Так:
let container;
let inputs;
let total;
function calcAndShowTotal() {
let sum = 55435.04798; // it is constant value which must be the beginning value.
let value;
inputs.each(function() {
if ($(this).is('input:checkbox:checked')) {
// If is a checkbox
value = parseFloat($(this).attr('price')) || 0;
sum += value;
} else if ($(this).is('input:text:not(#total)')) {
// If is a text wait until you move to another element
let factor = 1;
if (this.id == 'm2') {
factor = 3134.204499;
} else if (this.id == 'binayasi') {
factor = -566.2202888;
}
value = parseFloat($(this).val()) * factor || 0;
sum += value;
} else if ($(this).is('select')) {
// If is a option from the select element
value = parseFloat($('option:selected', this).val()) || 0;
sum += value;
}
});
total.val(sum);
}
function initHandlers() {
inputs.on('keydown', function(e) {
let focusable, next;
if (e.keyCode == 13) {
focusable = inputs.filter(':visible');
next = focusable.eq(focusable.index(this) + 1);
if (next.length) {
next.focus();
}
return false;
}
});
inputs.change(calcAndShowTotal);
calcAndShowTotal();
}
$(function() {
console.info('ready!');
total = $('#total');
container = $('#housepriceguesslist');
inputs = container.find('input:checkbox, input:text, select');
initHandlers();
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "housepriceguesslist">
Total: <input type = "text" id = "total" value = "0" />
<br/>
<br/>
<select id = "ilce">
<option value = "0">Choose a state</option>
<option value = "63999.50712318567">Adalar</option>
<option value = "6259.918435398593">Ataşehir</option>
<option value = "46285.35729304834">Beykoz</option>
<option value = "54258.92953697798">Kadıköy</option>
<option value = "-3500.620905653726">Kartal</option>
<option value = "12889.41219909602">Maltepe</option>
<option value = "-33711.83156847153">Pendik</option>
<option value = "-34577.42485251657">Sancaktepe</option>
<option value = "-52183.1608811019">Sultanbeyli</option>
<option value = "-34760.71735007784">Tuzla</option>
<option value = "-27379.87966213786">Çekmeköy</option>
<option value = "-5332.203990418937">Ümraniye</option>
<option value = "26485.33532820411">Üsküdar</option>
<option value = "-18732.62070553167">Şile</option>
</select>
<select id = "odasalon">
<option value = "0">Choose room number</option>
<option value = "5940.027623576261">1+0</option>
<option value = "-1399.625767475593">1+1</option>
<option value = "-3033.638999060459">2+1</option>
<option value = "11519.83954756076">3+1</option>
<option value = "-7018.52116545078">4+1</option>
<option value = "-6008.081239150166">5+1</option>
</select>
m2: <input type = "text" id = "m2" />
Bina Yasi: <input type = "text" id = "binayasi" />
<br/>
<br/> Features:
<br/>
<br/>
<input type = "checkbox" id = "Bati" value = "Bati" price = "-783.4452683566533" /> <label for = "Bati">Bati</label>
<br/>
<input type = "checkbox" id = "Dogu" value = "Dogu" price = "-4895.732009084263" /> <label for = "Dogu">Dogu</label>
<br/>
<input type = "checkbox" id = "Guney" value = "Guney" price = "-2599.001349652765" /> <label for = "Guney">Guney</label>
<br/>
<input type = "checkbox" id = "Kuzey" value = "Kuzey" price = "3832.013070771234" /> <label for = "Kuzey">Kuzey</label>
<br/>
<input type = "checkbox" id = "Amerikan Mutfak" value = "Amerikan Mutfak" price = "2346.347889828301" /> <label for = "Amerikan Mutfak">Amerikan Mutfak</label>
<br/>
<input type = "checkbox" id = "Dusakabin" value = "Dusakabin" price = "-176.5092353740256" /> <label for = "Dusakabin">Dusakabin</label>
<br/>
<input type = "checkbox" id = "Akilli Ev" value = "Akilli Ev" price = "-4756.206384200719" /> <label for = "Akilli Ev">Akilli Ev</label>
<br/>
<input type = "checkbox" id = "Ebeveyn Banyosu" value = "Ebeveyn Banyosu" price = "10135.50644456019" /> <label for = "Ebeveyn Banyosu">Ebeveyn Banyosu</label>
<br/>
<input type = "checkbox" id = "Kiler" value = "Kiler" price = "-10693.49979821809" /> <label for = "Kiler">Kiler</label>
<br/>
<input type = "checkbox" id = "Kuvet" value = "Kuvet" price = "-941.0629741243247" /> <label for = "Kuvet">Kuvet</label>
<br/>
<input type = "checkbox" id = "Parke Zemin" value = "Parke Zemin" price = "-8453.847199707092" /> <label for = "Parke Zemin">Parke Zemin</label>
<br/>
<input type = "checkbox" id = "Seramik Zemin" value = "Seramik Zemin" price = "1545.025601000643" /> <label for = "Seramik Zemin">Seramik Zemin</label>
<br/>
<input type = "checkbox" id = "Sauna" value = "Sauna" price = "8677.708176289747" /> <label for = "Sauna">Sauna</label>
<br/>
<input type = "checkbox" id = "Spor Salonu" value = "Spor Salonu" price = "1159.884679563385" /> <label for = "Spor Salonu">Spor Salonu</label>
<br/>
<input type = "checkbox" id = "Tenis Kortu" value = "Tenis Kortu" price = "16065.26794172257" /> <label for = "Tenis Kortu">Tenis Kortu</label>
<br/>
</div>Не забудьте округлить числа, чтобы получить большую точность. Изменение текста будет применено после нажатия на вкладку или перехода к другому элементу. Поэтому я добавил прослушиватель ввода, поэтому, когда вы нажимаете ввод, он переходит к следующему элементу, например, когда вы нажимаете клавишу Tab. Кроме того, я переместил итог наверх, чтобы вы могли видеть результаты в предварительном просмотре.
Я рекомендую вам использовать $(function(){});, чтобы получить документ, когда он будет готов. Внутри вы можете назначать значения ваших элементов. Я заметил, что в моем коде была ошибка всякий раз, когда вы снимали флажок с отмеченного элемента, сумма должна быть 55435.04798, но она показывает двойное значение, потому что total также является вводом text.
Вы не должны создавать пользовательские атрибуты, такие как
price. Если вам нужно хранить данные приложения в элементах HTML, используйте атрибутыdata-XXX, напримерdata-price = "-176.05"