Ya lo resuelvo, Aquí está mi código HTML 👇
<strong>Product Price = $20</strong><br> <strong>Bag Price = $10</strong><br> <hr> <label>Quantity of products</label> <br> <input type="number" id="quantity"> <br> <input type="checkbox" id="with_bag"> <label>With a bag</label> <br> <p>Total Price 👇</p> <input type="text" id="total_price" readonly>Y aquí está mi código jQuery 👇
// Calculate total price (On Keyup) $(document).on("keyup", "#quantity", function() { var quantity = $('#quantity').val(); var content_price = $("#with_bag").is(':checked') ? 10 : 0; var total_price = (20 * quantity) + content_price; $('#total_price').val('$' + total_price.toFixed(2)); }); // Calculate total price (On Click) $(document).on('click', '#with_bag', function(){ var quantity = $('#quantity').val(); var total_price = 20 * quantity; if(this.checked){ total_price = (20 * quantity) + 10; } $('#total_price').val('$' + total_price.toFixed(2)); });Solo quiero saber cómo obtener estos dos eventos diferentes (al presionar y al hacer clic) en la misma función.
Puede crear una función y realizar un seguimiento de su evento de forma condicional si esto es exactamente lo que desea.
function myFunction(event){ var quantity = $('#quantity').val(); if(event.type == "keyup"){ var content_price = $("#with_bag").is(':checked') ? 10 : 0; var total_price = (20 * quantity) + content_price; $('#total_price').val('$' + total_price.toFixed(2)); } else{ var total_price = 20 * quantity; if($('#with_bag').is(":checked")){ total_price = (20 * quantity) + 10; } $('#total_price').val('$' + total_price.toFixed(2)); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <strong>Product Price = $20</strong><br> <strong>Bag Price = $10</strong><br> <hr> <label>Quantity of products</label> <br> <input type="number" onkeyup="myFunction(event);" id="quantity"> <br> <input type="checkbox" onclick="myFunction(event);" id="with_bag"> <label>With a bag</label> <br> <p>Total Price 👇</p> <input type="text" id="total_price" readonly>