2

como puedo obtener el nombre y precio de los artículos, de un campo checked por consola en jquery.

Tengo un html con un input, span(nombre del articulo), y otro span(con el precio del articulo). ¿como puedo obtener los valores de estos por jquery?

Luego tengo esta función donde quiero obtener el nombre y precio del articulo por consola, pero al seleccionar el botón me sale on

function cogerSeleccionados() {
  let nombreArticulo;
  $("#agregarCarrito").click(function() {
    $('input:checked ').each(function(posicion, valor) {
      $(".nombreArticulos").val(nombreArticulo);
    });
    console.log(nombreArticulo);
    /*             alert("Number of selected Languages: " + selectedLanguage.length + "\n" + "And, they are: " + selectedLanguage);
     */
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputs">

  <div><input name="ps5" type="checkbox" data-com.bitwarden.browser.user-edited="yes"><span class="nombreArticulos">Playstation 5 - </span><span class="precio">779.90</span></div>
  <div><input name="tv" type="checkbox"><span class="nombreArticulos">TV Xiaomi 43" - </span><span class="precio">399.00</span></div>
  <div><input name="nevera" type="checkbox"><span class="nombreArticulos">Nevera Samsung - </span><span class="precio">1099.95</span></div>
  <div><input name="lavadora" type="checkbox"><span class="nombreArticulos">Lavadora/Secadora Balay - </span><span class="precio">1074.95</span></div>
  <div><input name="xbox" type="checkbox"><span class="nombreArticulos">Xbox Series S - </span><span class="precio">299.95</span></div>
</div>

2 respuestas 2

2

Prueba de este modo, sin tener que modificar el HTML y basándote en la disposición actual de tu HTML:

$("#agregarCarrito").click(function() {
  let nombreArticulo = ''
  let precioArticulo = ''
  let carrito = []
  $('input:checked ').each(function(posicion, valor) {
    nombreArticulo = ($(this).closest("div").find(".nombreArticulos").html());
    precioArticulo = ($(this).closest("div").find(".precio").html());
    console.log(nombreArticulo)
    console.log(precioArticulo)

    carrito.push([nombreArticulo, precioArticulo])
  });
  console.log(carrito)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputs">

  <div><input name="ps5" type="checkbox" data-com.bitwarden.browser.user-edited="yes"><span class="nombreArticulos">Playstation 5 - </span><span class="precio">779.90</span></div>
  <div><input name="tv" type="checkbox"><span class="nombreArticulos">TV Xiaomi 43" - </span><span class="precio">399.00</span></div>
  <div><input name="nevera" type="checkbox"><span class="nombreArticulos">Nevera Samsung - </span><span class="precio">1099.95</span></div>
  <div><input name="lavadora" type="checkbox"><span class="nombreArticulos">Lavadora/Secadora Balay - </span><span class="precio">1074.95</span></div>
  <div><input name="xbox" type="checkbox"><span class="nombreArticulos">Xbox Series S - </span><span class="precio">299.95</span></div>
</div>
<button id="agregarCarrito">
Agregar carrito
</button>

donde usamos el método closest() para situarnos en el div padre del checkbox seleccionado, y desde alli buscamos, con el método find() las clases de los span que contienen el nombre del artículo y su precio dentro del mismo div, y lo agregamos a una variable carrito de forma conjunta correlacionándolos entre si para un posible uso posterior.

1
1

Puedes hacerlo de la siguiente forma:

usas los atributos name y value de tu checkbox para guardar la informacion (nombre y valor), posteriormente el button de buscar productos hara una busqueda de los checkbox activos en el div de inputs y extraera los atributos con jquery, y ademas en la misma funcion he creado un arreglo de objetos con los productos seleccionados espero te sirva.

function buscarArticulos(){
//Busca los checkbox en estado checked
    let inputCheck =      $("#divInputs").find("input[type='checkbox']:checked");
    //Extrae la informacion de los checkbox encontrados
    let elementos = inputCheck.map((index,item)=>{
      return {
        nombreProducto: $(item).attr('name'),
        precio: $(item).val()
      }
    })
    //Muestra la informacion de los productos seleccionados.
    console.info(elementos)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="divInputs" class="inputs">
  <div><input name="Playstation 5" value="779.90" type="checkbox" data-com.bitwarden.browser.user-edited="yes"><span class="nombreArticulos">Playstation 5 - </span><span class="precio">779.90</span></div>
  <div><input name="TV Xiaomi 43" value="399.00"  type="checkbox"><span class="nombreArticulos">TV Xiaomi 43" - </span><span class="precio">399.00</span></div>
  <div><input name="Nevera Samsung" value="1099.95" type="checkbox"><span class="nombreArticulos">Nevera Samsung - </span><span class="precio">1099.95</span></div>
  <div><input  name="Lavadora/Secadora Balay" value="1074.95" type="checkbox"><span class="nombreArticulos">Lavadora/Secadora Balay - </span><span class="precio">1074.95</span></div>
  <div><input name="Xbox Series S" value="299.95" type="checkbox"><span class="nombreArticulos">Xbox Series S - </span><span class="precio">299.95</span></div>
</div>
<button type="button" onclick="buscarArticulos()"> buscar</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.