.prop ('verificado', falso) ou .removeAttr ('verificado')?

115

Com a introdução do método prop, agora preciso saber a maneira aceita de desmarcar uma caixa de seleção. É isso:

$('input').filter(':checkbox').removeAttr('checked');

ou

$('input').filter(':checkbox').prop('checked',false);
jquery Phillip Senn
fonte
4
Você leu a postagem de John Resig? ejohn.org/blog/jquery-16-and-attr
Jared Farrish

Respostas:

130

jQuery 3

A partir do jQuery 3, removeAttrse não definir a propriedade correspondente a falsemais:

Antes do jQuery 3.0, usando .removeAttr()em um atributo booleano tais como checked, selectedou readonlyse também definir o correspondente propriedade nomeada para false. Esse comportamento era necessário para versões antigas do Internet Explorer, mas não é correto para navegadores modernos porque o atributo representa o valor inicial e a propriedade representa o valor atual (dinâmico).

Quase sempre é um erro usar .removeAttr( "checked" )em um elemento DOM. A única vez que pode ser útil é se o DOM for serializado posteriormente em uma string HTML. Em todos os outros casos, .prop( "checked", false )deve ser usado.

Changelog

Portanto, só .prop('checked',false)é a maneira correta ao usar esta versão.

Resposta original (de 2011):

Para atributos que têm propriedades booleanas subjacentes (das quais checkeduma), removeAttrdefine automaticamente a propriedade subjacente como false. (Observe que isso está entre as "correções" de compatibilidade retroativa adicionadas no jQuery 1.6.1).

Então, qualquer um vai funcionar ... mas o segundo exemplo que você deu (usando prop) é o mais correto dos dois. Se o seu objetivo é desmarcar a caixa de seleção, você realmente deseja afetar a propriedade , não o atributo, e não há necessidade de passar por removeAttrisso.

John Flatness
fonte
36
@tandu: Você pode , mas não deveria. Dos documentos: " Observação: não use [ removeProp()] para remover propriedades nativas, como marcado, desabilitado ou selecionado. Isso removerá a propriedade completamente e, uma vez removido, não pode ser adicionado novamente ao elemento. Use .prop()para definir essas propriedades como falso em vez de." removePropdestina-se realmente ao uso apenas com propriedades personalizadas.
John Flatness,
17

use checked: propriedade verdadeira, falsa da caixa de seleção.

jQuery:

if($('input[type=checkbox]').is(':checked')) {
    $(this).prop('checked',true);
} else {
    $(this).prop('checked',false);
}
Suraj Rawat
fonte
Podemos eliminar if, senão usando um liner, $ (this) .prop ('verificado', $ ('input [type = checkbox]'). Is (': verificado'));
Yousaf Hassan
8

Eu recomendo usar ambos, prop e attr porque tive problemas com o Chrome e resolvi usando as duas funções. 

if ($(':checkbox').is(':checked')){
    $(':checkbox').prop('checked', true).attr('checked', 'checked');
}
else {
    $(':checkbox').prop('checked', false).removeAttr('checked');
}
Ragnar
fonte
Sim, para o Chrome, use: $("input[type='checkbox'], input[type='radio']").prop("checked", false).attr("checked", false).removeAttr("checked");
Rod de
Eu uso o componente personalizado (CSS + JS) para substituir o rádio de entrada e a caixa de seleção. Esta é a única maneira que funciona para mim. Obrigado!
Silvio Delgado
3

Outra alternativa para fazer a mesma coisa é filtrar no atributo type = checkbox :

$('input[type="checkbox"]').removeAttr('checked');

ou

$('input[type="checkbox"]').prop('checked' , false);

Lembre-se de que A diferença entre atributos e propriedades pode ser importante em situações específicas. Antes do jQuery 1.6 , o método .attr () às vezes levava em consideração os valores das propriedades ao recuperar alguns atributos, o que poderia causar um comportamento inconsistente. A partir do jQuery 1.6, o método .prop () fornece uma maneira de recuperar explicitamente os valores das propriedades, enquanto .attr () recupera os atributos.

Saiba mais ...

Tonnoz
fonte
2
A pergunta era "Qual destes é mais correto", não "Existem outras maneiras de fazer isso?". Parece que você não tentou responder à pergunta
Andrew Stubbs