Como obter o tipo de entrada usando jquery?

147

Eu tenho uma página em que o tipo de entrada sempre varia e preciso obter os valores dependendo do tipo de entrada. Portanto, se o tipo é um rádio, preciso obter o que está marcado e, se for uma caixa de seleção, agora preciso marcar o que está marcado e, se for uma lista suspensa, preciso saber qual está selecionado e, se estiver, um texto / área de texto Eu preciso conhecer os valores.

Alguma idéia de como fazer isso?

Luci
fonte
2
Pessoal, todos vocês dependem do ID de entrada, mas, no caso de rádio ou caixa de seleção, devo ter o mesmo ID? sabendo que o ID deve ser único.
Luci

Respostas:

270

EDIT 1 de fevereiro de 2013. Devido à popularidade desta resposta e às alterações no jQuery na versão 1.9 (e 2.0) em relação às propriedades e atributos, adicionei algumas notas e um violino para ver como ele funciona ao acessar propriedades / atributos na entrada, botões e algumas opções. O violino aqui: http://jsfiddle.net/pVBU8/1/


obtenha todas as entradas:

var allInputs = $(":input");

obtenha todo o tipo de entradas:

allInputs.attr('type');

obtenha os valores:

allInputs.val();

NOTA: .val () NÃO é o mesmo que: verificado para os tipos em que isso é relevante. usar:

.attr("checked");

Edição: 1 de fevereiro de 2013 - re: jQuery 1.9 use prop () not attr (), pois attr não retornará valores adequados para propriedades que foram alteradas.

.prop('checked');

ou simplesmente

$(this).checked;

para obter o valor da verificação - seja ela qual for atualmente. ou simplesmente use o ': marcado' se você quiser apenas aqueles que estão marcados.

EDIT: Aqui está outra maneira de obter o tipo:

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

EDIT2: Observe que o formato de:

$('input:radio');

é perferido sobre

$(':radio');

que ambos equivalem a:

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

mas a "entrada" é desejada, portanto, ela só obtém as entradas e não usa o '* "universal quando $(':radio')é usada a forma de que equivale a$('*:radio');

EDIT 19 de agosto de 2015: a preferência pelo $('input[type=radio]');deve ser usada, pois permite que os navegadores modernos otimizem a busca por uma entrada de rádio.


EDIT 1 de fevereiro de 2013 por comentário re: select elements @dariomac

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

retornará "selecione um" ou "selecione vários", dependendo do atributo "múltiplo" e

$('select')[0].type 

retorna o mesmo para a primeira seleção, se existir. e

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

retornará o tipo, se existir, ou "howdy", se não existir.

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

retorna a propriedade do primeiro no DOM, se existir, ou "indefinido", se não existir.

$('select').type

retorna o tipo do primeiro caso exista ou um erro se não existir.

Mark Schultheiss
fonte
Eu tentei o seguinte: var type = $ (": input [name =" + name + "]"). Attr ('type'); e funcionou! Obrigado.
Luci
2
E o "dropdown" ou selecione a entrada ...? porque isso não é uma marca de entrada ... Eu tenho o mesmo problema, mas agora eu estou pensando em usar a propriedade tipo dom ...
dariomac
allInputs.attr('type');obterá apenas o primeiro tipo de entrada de elementos, ie. allInputs[0].attr('type');se houver mais de um elemento na coleção. O mesmo vale para allInputs.val();Se você queria fazer alguma coisa com o tipo ou valor de cada elemento, você teria que fazer algo assimallInputs.each(function(){ var type = $(this).attr('type'); var val = $(this).val() });
andyface
LOL esse violão ganhou vida própria com 82 revisões até essa data. jsfiddle.net/pVBU8/82
Mark Schultheiss
15

Você pode fazer o seguinte:

var inputType = $('#inputid').attr('type');
xil3
fonte
isso significa que eu tenho que dar a cada rádio / verificar o mesmo id?
Luci
6
@zeina - Nunca dê aos elementos o mesmo ID.
precisa saber é o seguinte
@ patrick- Eu sei que os IDs devem ser únicos, mas por que eles estão sugerindo obter o tipo de entrada por ID, e eu posso ter rádios e caixas de seleção nas quais devo depender dos nomes deles ?!
Jul10
1
NÃO, você não pode dar a eles o mesmo ID, isso NÃO é válido. você pode usar o: seletor jQuery entrada
Mark Schultheiss
9

Se o que você está dizendo é que deseja obter todas as entradas dentro de um formulário que tenham um valor sem se preocupar com o tipo de entrada, tente o seguinte:

Exemplo: http://jsfiddle.net/nfLfa/

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

Agora você deve ter um conjunto de elementos de entrada que tenham algum valor.

Você pode colocar os valores em uma matriz:

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

Ou você pode serializá-los:

var serialized = $inputs.serialize();
user113716
fonte
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();
};
Matthew Abbott
fonte
4
$("#yourobj").attr('type');
Ergec
fonte
4

O melhor lugar para começar a procurar é http://api.jquery.com/category/selectors/

Isso lhe dará um bom conjunto de exemplos.

Por fim, a seleção de elementos no DOM é realizada usando seletores CSS. Se você pensa em obter um elemento por ID, deseja usar $ ('# elementId'), se deseja que todas as tags de entrada usem $ ('input') e finalmente a parte que eu acho que você vai querer se quiser que todas as tags de entrada com um tipo de caixa de seleção usem $ ('input, [type = checkbox])

Nota: Você encontrará a maioria dos valores desejados nos atributos, portanto o seletor css para atributos é: [attributeName = value]

Só porque você pediu a lista suspensa como colocada em uma caixa de listagem, tente o seguinte:


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

O código era da memória, por isso, procure erros pequenos

Robert
fonte
Qual é o '[tamanho]' se referindo aqui?
Stranger
@Udhayakumar the '[size]' filtrará os resultados para incluir apenas elementos selecionados com um atributo de tamanho, portanto, apenas as caixas de listagem serão selecionadas e não as listas suspensas.
Robert
caixas de listagem -> Você quer dizer caixas de texto?
Stranger
1
@ Udhayakumar, não, quero dizer caixa de listagem, siga este link [ jsfiddle.net/565961fj ] para ver a diferença entre uma lista suspensa e uma caixa de listagem.
Robert
3
var val = $('input:checkbox:checked, input:radio:checked, \
   select option:selected, textarea, input:text',
   $('#container')).val();

Comentários:

  1. Suponho que exista exatamente um elemento de formulário, que pode ser uma área de texto, campo de entrada, selecionar formulário, um conjunto de botões de opção ou uma única caixa de seleção (você precisará atualizar meu código se precisar de mais caixas de seleção).

  2. O elemento em questão vive dentro de um elemento com ID container(para remover ambiguidades com outros elementos na página).

  3. O código retornará o valor do primeiro elemento correspondente encontrado. Desde que eu uso :checkede assim por diante, esse deve sempre ser exatamente o valor do que você está procurando.

Boldewyn
fonte
3

Parece que a funcionalidade attr está ficando mais obsoleta

$(this).attr('TYPE')
undefined
$(this).prop('type')
"text"
pat capozzi
fonte
0

Na minha aplicação, acabei com dois elementos diferentes com o mesmo ID (ruim). Um elemento era uma div e o outro, uma entrada. Eu estava tentando resumir minhas entradas e demorei um pouco para perceber os IDs duplicados. Ao colocar o tipo do elemento que eu queria na frente de #, pude pegar o valor do elemento de entrada e descartar a div:

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

Espero que ajude.

Tibi
fonte
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>
Amit Dwivedi
fonte
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>

eu recebo o tipo de formulário Wright

Santhosh Kumar
fonte