1

Como podria obtener los valores de mis checkbox cuando los selecciono y mostrar el data-name-display en un solo input separados por una coma(,)

   <input type="checkbox" id="ipad" name="ipad" data-name-display="Ipad-2020" class="selected-product">
    <input type="checkbox" id="tablet-2015" name="tablet-2015" data-name-display="Tablet-2015" class="selected-product">
    <input type="checkbox" id="smartphone" name="smartphone" data-name-display="Smartphone" class="selected-product">

    <!--Mostrarlos en este input-->
    <label for="all-products"> Usted ha seleccionado:
    <input type="text", name="all-products" id="all-products">

3
  • ¿Usas algún framework? Sería bueno que pongas la etiqueta. No reconozco tu forma de escribir los elementos...
    – A. Cedano
    Commented el 6 mar. 2020 a las 21:31
  • ya esta con las etiquetas.. :)
    – JoseFranc
    Commented el 6 mar. 2020 a las 21:35
  • Hace falta que indiques la acción requerida para mostrar los elementos chequeados (por ejemplo, tienes un botón para recogerlos todos, tiene que ser algo dinámico, etc).
    – A. Cedano
    Commented el 6 mar. 2020 a las 21:59

2 respuestas 2

1

Estoy utilizando el método forEach pata recorrer todas las casillas de verificación, y si una casilla esta marcada (checked) agrego el nombre de esta al array de los nombres. Esto pasa cada vez que el estado de una de las casillas de verificación cambia. Para esto estoy utilizando un receptor de eventos ( event listener )

El valor del input "#all-products" es la lista de los nombres separados por una coma. para crear esta lista estoy utilizando el método join()

Por favor lea los comentarios en el código.

// todas las casillas de verificación
let casillas = document.querySelectorAll("input[type='checkbox']")
//el input "#all-products"
let all = document.querySelector("#all-products")


casillas.forEach(c =>{//para cada casilla
  // un receptor de eventos ( event listener ) escucha los cambios y cada vez que el estado de una casilla cambia
  c.addEventListener("input", (e)=>{
    // el array de los nombres
    let nombres = []
    casillas.forEach(C =>{//para cada casilla
      // si la casilla está marcada (checked)
      if(C.checked){
      //agrega el nombre al array de los nombres
      nombres.push(C.dataset.nameDisplay)
      }
    })
    //establece el valor del input "#all-products" como la lista de los nombres separados por una coma
    all.value = nombres.join(",")
  })
})
<input type="checkbox" id="ipad" name="ipad" data-name-display="Ipad-2020" class="selected-product">
<input type="checkbox" id="tablet-2015" name="tablet-2015" data-name-display="Tablet-2015" class="selected-product">
<input type="checkbox" id="smartphone" name="smartphone" data-name-display="Smartphone" class="selected-product">

<!--Mostrarlos en este input-->
<label for="all-products"> Usted ha seleccionado:
<input type="text", name="all-products" id="all-products">

0

Con JQuery, según entiendo lo que pides, creo que sería algo así. Esto solo añade al "input", espero que esto te ayude.

$(document).ready(function(){

    $("input[type=checkbox]").click(function(){
    if($(this).prop("checked")==true){//comprobamos que si no está checkeado, lo introduzca al input
        if($("#all-products").val()==""){//si está vacío no pondremos coma
            $("#all-products").attr("value",$(this).attr("data-name-display"));
        //le añadimos el value al input deseado, y este será el contenido del atributo "data-name-display"
        }else{
            $("#all-products").attr("value",$("#all-products").val()+", "+$(this).attr("data-name-display"));
        //si no es el primero, añadimos una coma
        }
    }
    });
});

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.