¿Cómo obtener el tipo de entrada usando jquery?


147

Tengo una página donde el tipo de entrada siempre varía, y necesito obtener los valores dependiendo del tipo de entrada. Entonces, si el tipo es una radio, necesito obtener cuál está marcada, y si es una casilla de verificación, necesito ahora cuáles están marcadas, y si es un menú desplegable, necesito saber cuál está seleccionada, y si está seleccionada un texto / área de texto Necesito saber los valores.

¿Alguna idea de cómo hacer eso?


2
Chicos, todos dependen de la identificación de entrada, pero en caso de radio o casilla de verificación, ¿se supone que tengo la misma identificación? sabiendo que la identificación debe ser única.
Luci

Respuestas:


270

EDITAR el 1 de febrero de 2013. Debido a la popularidad de esta respuesta y los cambios en jQuery en la versión 1.9 (y 2.0) con respecto a propiedades y atributos, agregué algunas notas y un violín para ver cómo funciona al acceder a propiedades / atributos en la entrada, botones y algunas selecciones. El violín aquí: http://jsfiddle.net/pVBU8/1/


obtener todas las entradas:

var allInputs = $(":input");

obtener todo el tipo de entradas:

allInputs.attr('type');

obtener los valores:

allInputs.val();

NOTA: .val () NO es lo mismo que: marcado para aquellos tipos donde eso es relevante. utilizar:

.attr("checked");

EDITAR 1 de febrero de 2013 - re: jQuery 1.9 use prop () not attr () ya que attr no devolverá los valores adecuados para las propiedades que han cambiado.

.prop('checked');

o simplemente

$(this).checked;

para obtener el valor del cheque, sea lo que sea actualmente. o simplemente use ': marcado' si desea solo aquellos que ESTÁN marcados.

EDITAR: Aquí hay otra forma de obtener el tipo:

var allCheckboxes=$('[type=checkbox]');

EDIT2: Tenga en cuenta que la forma de:

$('input:radio');

se perferirá

$(':radio');

que ambos equivalen a:

$('input[type=radio]');

pero se desea la "entrada" para que solo obtenga las entradas y no use el '* "universal cuando $(':radio')se usa la forma de que equivale a$('*:radio');

EDITAR 19 de agosto de 2015: se $('input[type=radio]');debe usar la preferencia para que así los navegadores modernos optimicen la búsqueda de una entrada de radio.


EDITAR el 1 de febrero de 2013 por comentario re: seleccionar elementos @dariomac

$('select').prop("type");

devolverá "select-one" o "select-multiple" dependiendo del atributo "multiple" y

$('select')[0].type 

devuelve lo mismo para la primera selección si existe. y

($('select')[0]?$('select')[0].type:"howdy") 

devolverá el tipo si existe o "howdy" si no existe.

 $('select').prop('type');

devuelve la propiedad del primero en el DOM si existe o "indefinido" si no existe ninguno.

$('select').type

devuelve el tipo del primero si existe o un error si no existe ninguno.


Intenté esto: var type = $ (": input [name =" + name + "]"). Attr ('type'); ¡Y funcionó! Gracias.
Luci

2
¿Y qué pasa con el "menú desplegable" o la entrada de selección ...? porque esa no es una etiqueta de entrada ... Tengo el mismo problema ahora pero estoy pensando en usar la propiedad type dom ...
dariomac

allInputs.attr('type');solo obtendrá el primer tipo de entrada de elementos, es decir. allInputs[0].attr('type');si hay más de un elemento en la colección. Lo mismo ocurre con allInputs.val();Si quería hacer algo con el tipo o valor de cada elemento, que tendría que hacer algo comoallInputs.each(function(){ var type = $(this).attr('type'); var val = $(this).val() });
andyface

LOL ese violín ha cobrado vida propia con 82 revisiones a partir de esta fecha. jsfiddle.net/pVBU8/82
Mark Schultheiss

15

Podrías hacer lo siguiente:

var inputType = $('#inputid').attr('type');

¿Esto significa que tengo que dar a cada radio / comprobar la misma identificación?
Luci

66
@zeina: nunca les dé a los elementos la misma ID.
user113716

@ patrick- Sé que los identificadores deben ser únicos, pero ¿por qué sugieren obtener el tipo de entrada por id, y puedo tener radios y casillas de verificación en las que dependeré de sus nombres?
Luci

1
NO, no puede darles la misma identificación, eso NO es válido. puede usar el: selector de entrada jQuery
Mark Schultheiss

9

Si lo que está diciendo es que desea obtener todas las entradas dentro de un formulario que tengan un valor sin preocuparse por el tipo de entrada, intente esto:

Ejemplo: http://jsfiddle.net/nfLfa/

var $inputs = $('form').find(':checked,:selected,:text,textarea').filter(function() {
    return $.trim( this.value ) != '';
});

Ahora debe tener un conjunto de elementos de entrada que tengan algún valor.

Puede poner los valores en una matriz:

var array = $inputs.map(function(){
    return this.value;
}).get();

O podrías serializarlos:

var serialized = $inputs.serialize();

7
GetValue = function(id) {
  var tag = this.tagName;
  var type = this.attr("type");

  if (tag == "input" && (type == "checkbox" || type == "radio"))
    return this.is(":checked");

  return this.val();
};


4

El mejor lugar para comenzar a buscar es http://api.jquery.com/category/selectors/

Esto le dará un buen conjunto de ejemplos.

Por último, la selección de elementos en el DOM se logra utilizando selectores CSS, por lo que si piensa obtener un elemento por id, querrá usar $ ('# elementId'), si desea que todas las etiquetas de entrada usen $ ('input') y finalmente la parte que creo que querrá si desea que todas las etiquetas de entrada con un tipo de casilla de verificación usen $ ('input, [type = checkbox])

Nota: encontrará que la mayoría de los valores que desea están en los atributos, por lo que el selector css para los atributos es: [attributeName = value]

Solo porque solicitó el menú desplegable como se indica en un cuadro de lista, intente lo siguiente:


$('select, [size]).each(function(){
  var selectedItem = $('select, [select]', this).first();
});

El código era de la memoria, así que acéptelo por pequeños errores.


¿A qué se refiere el '[tamaño]' aquí?
Extraño el

@Udhayakumar el '[tamaño]' filtrará los resultados para incluir solo elementos seleccionados con un atributo de tamaño, por lo que solo se seleccionarán los cuadros de lista y no los menús desplegables.
Robert

cuadros de lista -> ¿Te refieres a cuadros de texto?
Extraño el

1
@Udhayakumar, no me refiero al cuadro de lista, siga este enlace [ jsfiddle.net/565961fj ] para ver la diferencia entre un menú desplegable y un cuadro de lista.
Robert

3
var val = $('input:checkbox:checked, input:radio:checked, \
   select option:selected, textarea, input:text',
   $('#container')).val();

Comentarios:

  1. Supongo que hay exactamente un elemento de formulario, que puede ser un área de texto, un campo de entrada, un formulario de selección, un conjunto de botones de opción o una sola casilla de verificación (tendrá que actualizar mi código si necesita más casillas de verificación).

  2. El elemento en cuestión vive dentro de un elemento con ID container(para eliminar ambigüedades con otros elementos en la página).

  3. El código devolverá el valor del primer elemento coincidente que encuentre. Como uso, :checkedetc., esto siempre debe ser exactamente el valor de lo que estás buscando.


3

Parece que la funcionalidad del atributo se está desaprobando aún más

$(this).attr('TYPE')
undefined
$(this).prop('type')
"text"

0

En mi aplicación, terminé con dos elementos diferentes que tienen la misma identificación (mala). Un elemento era un div y el otro una entrada. Estaba tratando de resumir mis entradas y me tomó un tiempo darme cuenta de los identificadores duplicados. Al colocar el tipo del elemento que quería delante de #, pude tomar el valor del elemento de entrada y descartar el div:

$("input#_myelementid").val();

Espero que ayude.


0
<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $(".show-pwd").click(function(){
          alert();
            var x = $("#myInput");
            if (x[0].type === "password") {
              x[0].type = "text";
            } else {
              x[0].type = "password";
            }
          });
        });
    </script>
</head>

<body>
    <p>Click the radio button to toggle between password visibility:</p>Password:
    <input type="password" value="FakePSW" id="myInput">
    <br>
    <br>
    <input type="checkbox" class="show-pwd">Show Password</body>

</html>

0
  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script type="text/javascript" src="hs/jquery1.js"></script>
        <title>Document</title>
    </head>
    <body>
        <form>
            <input type="text" class="tamil">
            <input type="button" class="english">
        </form>
        <script>
            $("input").addClass(function(index){
                    console.log($(this).attr('type'));
            })
        </script>
    </body>
    </html>

me sale tipo de formulario wright

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.