Tengo el siguiente código dentro de un formulario POST. Cuando alguien hace clic en la entrada, el valor del precio cambia al que el usuario ha hecho clic.
La clase de entrada es solo un método para modificar el CSS una vez que se hace clic, para que pueda ver cuál se hizo clic en último lugar.
(function() { $(function() { var toggle; return toggle = new Toggle('.toggle'); }); this.Toggle = (function() { class Toggle { constructor(toggleClass) { this.el = $(toggleClass); this.tabs = this.el.find(".hs_pricing_toggle"); this.panels = this.el.find(".panel"); this.bind(); } show(index) { var activePanel, activeTab; //update tabs this.tabs.removeClass('activate'); activeTab = this.tabs.get(index); $(activeTab).addClass('activate'); //update panels this.panels.hide(); activePanel = this.panels.get(index); return $(activePanel).show(); } bind() { return this.tabs.unbind('click').bind('click', (e) => { return this.show($(e.currentTarget).index()); }); } }; Toggle.prototype.el = null; Toggle.prototype.tabs = null; Toggle.prototype.panels = null; return Toggle; }).call(this); }).call(this); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hs_pricing_toggle__wrapper" id="toggle__wrapper"> <input class="price1 hs_pricing_toggle" type="" id="pricing" name="pricing" placeholder="5" value="5" required/> <input class="price2 hs_pricing_toggle" type="" id="pricing" name="pricing" placeholder="10" value="5" required/> <input class="price3 hs_pricing_toggle" type="" id="pricing" name="pricing" placeholder="15" value="5" required/> <input class="price4 hs_pricing_toggle" type="" id="pricing" name="pricing" placeholder="insert value" required/>Esto solo cambia el CSS de la clase 'hs_pricing_toggle' y muestra un dentro del panel de la clase. Nada importante en este caso, supongo.