Preciso verificar a checked
propriedade de uma caixa de seleção e executar uma ação com base na propriedade marcada usando o jQuery.
Por exemplo, se a caixa de seleção de idade estiver marcada, preciso mostrar uma caixa de texto para inserir a idade; caso contrário, oculte a caixa de texto.
Mas o código a seguir retorna false
por padrão:
if ($('#isAgeSelected').attr('checked'))
{
$("#txtAge").show();
}
else
{
$("#txtAge").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">
Age is selected
</div>
Como faço para consultar com sucesso a checked
propriedade?
javascript
jquery
html
checkbox
Prasad
fonte
fonte
$('#isAgeSelected').checked
$('#isAgeSelected')[0].checked
Respostas:
A
checked
propriedade de um elemento DOM da caixa de seleção fornecerá ochecked
estado do elemento.Dado o código existente, você pode fazer o seguinte:
No entanto, há uma maneira muito mais bonita de fazer isso, usando
toggle
:fonte
is(':checked')
negócio.this.checked
não é jQuery, conforme solicitado pelo OP. Além disso, ele só funciona quando o usuário clica na caixa de seleção, que não faz parte da pergunta. A questão é, novamente,How to check whether a checkbox is checked in jQuery?
a qualquer momento, com ou sem clicar na caixa de seleção e no jQuery.Use a função is () do jQuery :
fonte
$("#txtAge").toggle($("#isAgeSelected").is(':checked'))
.visible
"propriedade" ( propriedade ? você quer dizer método ?) porque o elemento no HTML possui uma propriedade visível . Eles têm umadisplay
propriedade de estilo e é um pouco mais complexo do que ligar / desligar.Usando jQuery> 1.6
Usando o novo método de propriedade:
fonte
.prop
método é a maneira projetada de verificar adereços. .. ... Se você for fazer a.is(":checked")
abordagem, tudo bem, mas não é a maneira projetada de fazer isso usando jquery. direita?.is(":checked")
e.prop("checked")
são formas válidas para obter o mesmo resultado em jQuery,.is
irá trabalhar em todas as versões,.prop
requer 1.6+.attr('checked')
jQuery 1.11.3, fica indefinido e, se usar.prop('checked')
, será verdadeiro / falso. Não vejo por que eles mudaram para funcionar dessa maneira, quando navegadores mais antigos não podem suportar as versões posteriores do jQuery que foram introduzidas.prop()
e, portanto, precisam.attr()
. A única graça salvadora é que os navegadores mais antigos (ie IE 8) não podem suportar nada> jQuery 1.9. Espero que eles não tenham feito isso (make.attr('checked')
= undefined) nessa versão! Felizmente, sempre háthis.checked
.jQuery 1.6+
jQuery 1.5 e abaixo
Qualquer versão do jQuery
Todo o crédito é para Xian .
fonte
this.checked
está usando Javascript direto. Mas eu amo essa resposta entre versões do jQuery!Estou usando isso e isso está funcionando absolutamente bem:
Nota: Se a caixa de seleção estiver marcada, ela retornará true, caso contrário indefinido, portanto, verifique melhor o valor "TRUE".
fonte
.attr()
! Se ao menos eles deixassem o suficiente sozinhos ... Encontrei outra resposta aqui que você pode usar apenasthis.checked
para uma solução entre jQuery, já que é basicamente Javascript.Usar:
fonte
Desde o jQuery 1.6, o comportamento de
jQuery.attr()
mudou e os usuários são incentivados a não usá-lo para recuperar o estado verificado de um elemento. Em vez disso, você deve usarjQuery.prop()
:Duas outras possibilidades são:
fonte
Isso funcionou para mim:
Onde
isAgeSelected
está o ID do controle.Além disso, a resposta de @ karim79 funciona bem. Não tenho certeza do que perdi no momento em que o testei.
Observe que esta resposta usa o Microsoft Ajax, não o jQuery
fonte
== true
Se você estiver usando uma versão atualizada do jquery, deve procurar o
.prop
método para resolver seu problema:$('#isAgeSelected').prop('checked')
retornarátrue
se marcado efalse
desmarcado. Confirmei e me deparei com esse problema anteriormente.$('#isAgeSelected').attr('checked')
e$('#isAgeSelected').is('checked')
está retornando, oundefined
que não é uma resposta digna para a situação. Faça o que é indicado abaixo.Espero que ajude:) - Obrigado.
fonte
$('#isAgeSelected').checked
?O uso do
Click
manipulador de eventos para a propriedade checkbox não é confiável, pois achecked
propriedade pode mudar durante a execução do próprio manipulador de eventos!Idealmente, você deseja colocar seu código em um
change
manipulador de eventos, como ele é acionado toda vez que o valor da caixa de seleção é alterado (independentemente de como isso é feito).fonte
.on()
método é o método preferido para anexar manipuladores de eventos a um documento.Usar:
Isso pode ajudar se você desejar que a ação necessária seja executada apenas quando você marcar a caixa e não no momento em que a remover.
fonte
Decidi postar uma resposta sobre como fazer exatamente a mesma coisa sem o jQuery. Só porque sou rebelde.
Primeiro, você obtém os dois elementos pelo ID. Em seguida, você atribui ao
onchange
evento da caixa de seleção uma função que verifica se a caixa de seleção foi marcada e define ohidden
propriedade do campo de texto de idade adequadamente. Nesse exemplo, usando o operador ternário.Aqui está um violino para você testá-lo.
Termo aditivo
Se a compatibilidade entre navegadores for um problema, proponho definir a
display
propriedade CSS como none e inline .Mais lento, mas compatível com vários navegadores.
fonte
.hidden
não é muito cross-browser, embora eu como esta solução :)style
. Isso é lamentável, pois o.hidden
desempenho é muito melhor .Eu acredito que você poderia fazer isso:
fonte
Corri exatamente para o mesmo problema. Eu tenho uma caixa de seleção do ASP.NET
No código do jQuery, usei o seguinte seletor para verificar se a caixa de seleção estava marcada ou não, e parece funcionar como um encanto.
Tenho certeza de que você também pode usar o ID em vez do CssClass,
Espero que isso ajude você.
fonte
Existem várias maneiras de verificar se uma caixa de seleção está marcada ou não:
Maneira de verificar usando jQuery
Veja exemplo ou também documento:
http://api.jquery.com/attr/
http://api.jquery.com/prop/
fonte
Este código irá ajudá-lo
fonte
Isso funciona para mim:
fonte
Este é um método diferente para fazer a mesma coisa:
fonte
Usa isto:
O comprimento é maior que zero se a caixa de seleção estiver marcada.
fonte
Minha maneira de fazer isso é:
fonte
Isso retorna
true
se a entrada estiver marcada efalse
se não estiver.fonte
.attr('checked')
pois nem sempre ele retorna o estado correto. De acordo com a resposta de Salman A (e talvez outras), é uma opção mais segura de usar . Além disso, também é possível declarar como ..prop('checked')
undefined
var undefined = 'checked';
.prop('checked')
parece uma resposta melhor agora. Não era tão confiável no momento em que foi escrito. Eu não entendo, nem acho que seja uma boa idéia redefinir indefinidamente.typeof (x) !== "undefined"
fonte
Você pode usar:
Ambos devem funcionar.
fonte
1) Se a sua marcação HTML for:
attr usado:
Se prop é usado:
2) Se a sua marcação HTML for:
attr usado:
Suporte usado:
fonte
Este exemplo é para o botão.
Tente o seguinte:
fonte
A resposta principal não fez isso por mim. Isso aconteceu no entanto:
Basicamente, quando o elemento # li_13 é clicado, ele verifica se o elemento # concorda (que é a caixa de seleção) está marcado usando a
.attr('checked')
função Se for, fadeIn no elemento #saveForm e, se não for, fadeOut o elemento saveForm.fonte
Eu estou usando isso:
fonte
Apesar de ter proposto uma solução JavaScript para o seu problema (exibindo uma
textbox
quando umcheckbox
échecked
), este problema poderia ser resolvido apenas por css . Com essa abordagem, seu formulário funciona para usuários que desativaram o JavaScript.Supondo que você tenha o seguinte HTML:
Você pode usar o seguinte CSS para obter a funcionalidade desejada:
Para outros cenários, você pode pensar nos seletores de CSS apropriados.
Aqui está um violino para demonstrar essa abordagem .
fonte
Alternar: 0/1 ou então
fonte
Eu acho que vai ser o mais simples
fonte