Obtener los valores de los input name con Jquery

publicado por: Anonymous

Tengo una aplicacion con varios checkboxes, y este codigo con Jquery:

var checkboxes = $(".borrar_contacto");
console.log(checkboxes);

Y este con JavaScript:

var checkboxes2 = document.getElementsByClassName("borrar_contacto");
console.log(checkboxes2);

En console.log no me muestran los mismos resultados. Con Jquery me muestra lo siguiente:

[input.borrar_contacto, input.borrar_contacto, 
input.borrar_contacto, input.borrar_contacto, prevObject: jQuery.fn.init[1]]

Y con JavaScript lo siguiente:

[input.borrar_contacto, input.borrar_contacto, 
input.borrar_contacto, input.borrar_contacto, 
10: undefined, 11: undefined, 12: undefined, 13: undefined]

Con JavaScript me muestra en la lista, los valores de los input name, pero con Jquery no. Como puedo hacer que me muestre exactamente lo mismo con Jquery?

solución

  • El método .getElementsByClassName() retorna un objecto similar a un array (HTMLCollection) de los elementos hijos que tengan todos los nombres de clase indicados.

  • El método $([selector]) devuelve un jQuery object que contiene una colección de elementos del DOM.

Como puedo hacer que me muestre exactamente lo mismo con Jquery?

Para que poder obtener exactamente lo mismo con jQuery, podrías hacer lo siguiente:

  • Convertir el HTMLCollection a array, haciendo uso del método .slice()
  • Convertir el jQuery object a array, haciendo uso del método .toArray()

Así por ejemplo:

_x000D_

_x000D_

var checkboxes2 = document.getElementsByClassName("borrar_contacto");_x000D_
// Convertimos el HTMLCollection a array_x000D_
console.log([].slice.call(checkboxes2));_x000D_
_x000D_
var checkboxes = $(".borrar_contacto");_x000D_
// Convertimos el jQuery object a array_x000D_
console.log(checkboxes.toArray());

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<label><input type="checkbox" class="borrar_contacto" value="1" />Contacto 1</label>_x000D_
<label><input type="checkbox" class="borrar_contacto" value="2" />Contacto 2</label>_x000D_
<label><input type="checkbox" class="borrar_contacto" value="3" />Contacto 3</label>_x000D_
<label><input type="checkbox" class="borrar_contacto" value="4" />Contacto 4</label>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *