Así que estoy creando esta calculadora de precios para mi sitio web danés en Webflow.
Escribí el JS como $('element').on('change', function() {..}) y realmente funciona. Pero solo en la primera Div.
Pensé que si ponía todo el código HTML sería demasiado, así que hice una versión corta con el código relevante.
$(document).ready(function() { var total; $('.mulighed').on('change', function() { total += $("[type='radio']:checked").val(); $('#total').html('Kr. ' + $("[type='radio']:checked").val()); }); }); .mulighed{margin: 25px;} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div class='row'> <input type='radio' class='mulighed' value='5'></input> <input type='radio' class='mulighed' value='10'></input> <input type='radio' class='mulighed' value='15'></input> </div> <div class='row'> <input type='radio' class='mulighed' value='150'></input> <input type='radio' class='mulighed' value='50'></input> <input type='radio' class='mulighed' value='100'></input> </div> <div class='row'> <input type='radio' class='mulighed' value='1000'></input> <input type='radio' class='mulighed' value='1500'></input> <input type='radio' class='mulighed' value='500'></input> </div> <p id='total'>0</p> </form>Primero debe convertir el valor a un número entero, $(this) se refiere al elemento sobre el que está actuando el evento de cambio .
$(document).ready(function() { var total=0; $('.mulighed').on('change', function() { total += parseInt($(this).val()); $('#total').html('Kr. ' +total); }); });ACTUALIZACIÓN: El siguiente código te permite restar también.
$(document).ready(function() { var total=0; $('input').on('click', function(e) { //e.preventDefault(); if(!$(this).data("log")){ $(this).prop("checked", true) $(this).data("log",true) total += parseInt($(this).val()); $('#total').html('Kr. ' +total); } else{ $(this).prop('checked', false); $(this).data("log",false) total -= parseInt($(this).val()); $('#total').html('Kr. ' +total); } }); });