Configurando "marcado" para uma caixa de seleção com jQuery


4131

Eu gostaria de fazer algo assim para marcar um jQuerycheckbox usando :

$(".myCheckBox").checked(true);

ou

$(".myCheckBox").selected(true);

Será que tal coisa existe?


Uma pergunta mais específica (e muito útil!), "Como faço para marcar um item em um conjunto de caixas de seleção POR VALOR?", Acho que também podemos discutir aqui e publiquei uma resposta abaixo.
22412 Peter Krauss

Confira outras maneiras de fazer isso usando jQuery aqui stackoverflow.com/a/22019103/1868660
Subodh Ghulaxe

Se você precisar o evento onchange acionado, é$("#mycheckbox").click();
HumanInDisguise

"Verificando algo" sugere testá-lo, então acho que 'Marcar uma caixa de seleção marcada' é um título mais claro e melhor.
Alireza

suporte(); função é a resposta perfeita. Veja a função definição - api.jquery.com/prop
yogihosting

Respostas:


5969

JQuery moderno

Use .prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

API DOM

Se você estiver trabalhando com apenas um elemento, sempre poderá acessar o subjacente HTMLInputElemente modificar sua .checkedpropriedade:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

O benefício de usar os métodos .prop()e em .attr()vez disso é que eles operarão em todos os elementos correspondentes.

jQuery 1.5.xe abaixo

O .prop()método não está disponível, então você precisa usá-lo .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Observe que esta é a abordagem usada pelos testes de unidade do jQuery anteriores à versão 1.6 e é preferível usar, $('.myCheckbox').removeAttr('checked');pois os últimos irão, se a caixa foi marcada inicialmente, alterar o comportamento de uma chamada para .reset()qualquer forma que a contenha - uma sutil, mas provavelmente mudança de comportamento indesejável.

Para obter mais contexto, alguma discussão incompleta das alterações no tratamento do checkedatributo / propriedade na transição de 1.5.x para 1.6 pode ser encontrada nas notas de versão da versão 1.6 e na seção Atributos vs. Propriedades da .prop()documentação .


26
@Xian remover o atributo verificado torna impossível para redefinir a forma
mcgrailm

6
Como uma nota lateral, jQuery 1.6.1 deve ser corrigir o problema que eu mencionei, para que possamos tehcnically todos ainda voltar a usar $ (...) prop (...).
cwharris

19
"Se você estiver trabalhando com apenas um elemento, será sempre mais rápido usar DOMElement.checked = true". Mas seria insignificante, porque é apenas um elemento ...
Tyler Crompton

46
Como diz Tyler, é uma melhoria insignificante no desempenho. Para mim, codificar usando uma API comum o torna mais legível do que misturar APIs nativas e APIs jQuery. Eu ficaria com jQuery.
Charlie Kilian

18
@TylerCrompton - Claro, não se trata apenas de desempenho, mas fazer $(element).prop('checked')é um completo desperdício de digitação. element.checkedexiste e deve ser utilizado nos casos em que você já temelement
gnarf

705

Usar:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

E se você deseja verificar se uma caixa de seleção está marcada ou não:

$('.myCheckbox').is(':checked');

4
também $ (selector) .checked to check está marcado
eomeroff 2/11/11

6
Eu tentei esse código exato e não funcionou para mim no caso de uma caixa de seleção selecionar tudo / selecionar nenhum que precise marcar e desmarcar tudo, bem como verificar seu estado. Em vez disso, tentei a resposta de @Christopher Harris e isso funcionou.
precisa

Por que usar o "formulário #mycheckbox" em vez de simplesmente "#mycheckbox"? O ID já é exclusivo em todo o documento, é mais rápido e mais simples selecioná-lo diretamente.
YuriAlbuquerque

@YuriAlbuquerque foi um exemplo. você pode usar o seletor que quiser.
bchhun

5
$ (seletor) .checked não funciona. Não existe um método 'marcado' no jQuery.
Brendan Byrd

318

Esta é a maneira correta de verificar e desmarcando caixas com jQuery, como é padrão multi-plataforma, e vai permitir que formam reposts.

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

Ao fazer isso, você está usando os padrões JavaScript para marcar e desmarcar as caixas de seleção, para que qualquer navegador que implemente adequadamente a propriedade "marcada" do elemento da caixa de seleção execute esse código na perfeição. Esses devem ser os principais navegadores, mas não consigo testar antes do Internet Explorer 9.

O problema (jQuery 1.6):

Depois que um usuário clica em uma caixa de seleção, essa caixa de seleção para de responder às alterações do atributo "marcado".

Aqui está um exemplo do atributo checkbox falhando ao executar o trabalho depois que alguém clicou na caixa de seleção (isso acontece no Chrome).

Violino

A solução:

Usando a propriedade "marcada" do JavaScript nos elementos DOM , somos capazes de resolver o problema diretamente, em vez de tentar manipular o DOM para fazer o que queremos que ele faça.

Violino

Este plugin alterará a propriedade marcada de qualquer elemento selecionado pelo jQuery e marcará e desmarcará com êxito as caixas de seleção em todas as circunstâncias. Portanto, embora isso possa parecer uma solução excessiva, ele melhorará a experiência do usuário do site e ajudará a evitar a frustração do usuário.

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

Como alternativa, se você não quiser usar um plug-in, poderá usar os seguintes trechos de código:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

5
No seu primeiro exemplo do JSFiddle, você deveria usar em removeAttr('checked')vez deattr('checked', false)
Daniel X Moore

4
@DanielXMoore, você está contornando a questão. O exemplo foi para mostrar que uma vez que a caixa de seleção foi clicada pelo usuário, o navegador não responde mais às checkedalterações de atributos, independentemente do método usado para alterá-las.
Cwharris

3
@ChristopherHarris Ok, você está certo, eu perdi isso. No jQuery 1.6, você não deveria usar o método .prop? $('.myCheckBox').prop('checked', true)Dessa forma, ele se aplicará automaticamente a todo o conjunto de elementos correspondentes (somente ao definir, porém, get ainda é o primeiro) #
Daniel X Moore

Sim. propé definitivamente a maneira apropriada de definir atributos em um elemento.
Cwharris

@ChristopherHarris, adicionei o que precisava ao plug-in para permitir alguma flexibilidade de parâmetros. Isso facilitou o processamento em linha sem a conversão de tipo. Esp de bancos de dados díspares com 'idéias' sobre o que é "verdadeiro". Fiddle: jsfiddle.net/Cyberjetx/vcp96
Joe Johnston

147

Você pode fazer

$('.myCheckbox').attr('checked',true) //Standards compliant

ou

$("form #mycheckbox").attr('checked', true)

Se você tiver um código personalizado no evento onclick da caixa de seleção que deseja acionar, use este:

$("#mycheckbox").click();

Você pode desmarcar removendo o atributo completamente:

$('.myCheckbox').removeAttr('checked')

Você pode marcar todas as caixas de seleção como esta:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

você também pode ir $ ("# myTable input: checkbox"). each (...);
Chris Brandsma

Você também pode ir$(".myCheckbox").click()
RobertPitt

3
@Michah remover o atributo do verificado torna impossível para redefinir a forma
mcgrailm

12
Esta resposta está desatualizada porque usa em .attrvez de .prop.
Blazemonger

$("#mycheckbox").click();trabalhou para mim como eu estava ouvindo mudar evento também e .attr& .propnão disparou evento de mudança.
Damodar Bashyal

80

Você também pode estender o objeto $ .fn com novos métodos:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Então você pode simplesmente fazer:

$(":checkbox").check();
$(":checkbox").uncheck();

Ou você pode dar a eles nomes mais exclusivos, como mycheck () e myuncheck (), caso você utilize alguma outra biblioteca que use esses nomes.


5
@ livfree75 remover o atributo verificado torna impossível para redefinir a forma
mcgrailm

5
Esta resposta está desatualizada porque usa em .attrvez de .prop.
Blazemonger

64
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

O último acionará o evento click para a caixa de seleção, os outros não. Portanto, se você tiver um código personalizado no evento onclick da caixa de seleção que deseja acionar, use o último.


4
Top One irá falhar ... verificado não é um membro do objeto jQuery
redsquare

5
Esta resposta está desatualizada porque usa em .attrvez de .prop.
Blazemonger

Na IMO, o clickevento não é confiável no Firefox e Edge.
Vahid Amiri

62

Para marcar uma caixa de seleção, você deve usar

 $('.myCheckbox').attr('checked',true);

ou

 $('.myCheckbox').attr('checked','checked');

e para desmarcar uma caixa de seleção, você deve sempre defini-la como false:

 $('.myCheckbox').attr('checked',false);

Se você fizer

  $('.myCheckbox').removeAttr('checked')

ele remove o atributo todos juntos e, portanto, você não poderá redefinir o formulário.

MAQ DEMO jQuery 1.6 . Eu acho que isso está quebrado. Para a 1.6 vou fazer um novo post sobre isso.

NOVA DEMO DE TRABALHO O jQuery 1.5.2 funciona no Chrome.

Ambas as demos usam

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

1
Isso é impreciso. definir o atributo 'marcado' como '' não desmarca as caixas de seleção pelo menos no chrome.
Cwharris #

@xixonia eu fiz teste antes de eu postei o seu violino não funciona porque você não mudar o menu à esquerda para incluir jQuery
mcgrailm

1
mcgralim - em 1,6 sua ainda mais fácil .... $(".mycheckbox").prop("checked", true/false)
gnarf

2
@ MarkAmery você mencionou que minha postagem não adicionou nada no momento da publicação, mas está correta. Se você olhar para o histórico da resposta aceita, verá que eles sugerem a remoção do elemento. O que torna impossível redefinir o formulário, e foi por isso que eu postei para começar.
Mcgrailm

1
@mcgrailm Fui em frente e modifiquei a resposta aceita à luz de seus comentários. Se você quiser dar uma olhada e verificar se está bem em seu estado atual, eu agradeceria. Peço desculpas novamente por oferecer críticas severas que foram, pelo menos em parte, altamente equivocadas.
Mark Amery

51

Isso seleciona elementos que têm o atributo especificado com um valor que contém a substring "ckbItem" fornecida:

$('input[name *= ckbItem]').prop('checked', true);

Ele selecionará todos os elementos que contêm ckbItem em seu atributo name.


46

Supondo que a pergunta seja ...

Como faço para marcar uma caixa de seleção definida por VALUE?

Lembre-se de que em um conjunto de caixas de seleção típico, todas as tags de entrada têm o mesmo nome, diferem pelo atributovalue : não há ID para cada entrada do conjunto.

A resposta de Xian pode ser estendida com um seletor mais específico , usando a seguinte linha de código:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

45

Estou sentindo falta da solução. Eu sempre vou usar:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

3
Isso não responde à pergunta (a questão é definir se uma caixa de seleção está marcada, não determinar se uma caixa de seleção está marcada). Também é uma maneira bastante feia de determinar se a caixa de seleção está marcada (por um lado, você está explorando o fato não evidente que .val()sempre retornará undefinedquando chamado pelos elementos 0 para detectar que um objeto jQuery está vazio, quando você poderia basta verificar o seu .length) - consulte stackoverflow.com/questions/901712/… para obter abordagens mais legíveis.
Mark-Amery

42

Para marcar uma caixa de seleção usando o jQuery 1.6 ou superior, faça o seguinte:

checkbox.prop('checked', true);

Para desmarcar, use:

checkbox.prop('checked', false);

Aqui está o que eu gosto de usar para alternar uma caixa de seleção usando o jQuery:

checkbox.prop('checked', !checkbox.prop('checked'));

Se você estiver usando o jQuery 1.5 ou inferior:

checkbox.attr('checked', true);

Para desmarcar, use:

checkbox.attr('checked', false);

37

Aqui está uma maneira de fazê-lo sem jQuery

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>


31

Aqui está o código para marcado e desmarcado com um botão:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

Atualização: Aqui está o mesmo bloco de código usando o método prop Jquery 1.6+ mais recente, que substitui attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});

4
Esta resposta está desatualizada porque usa em .attrvez de .prop.
Blazemonger

30

Tente o seguinte:

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking

29

Podemos usar o elementObjectjQuery para obter o atributo verificado:

$(objectElement).attr('checked');

Podemos usar isso para todas as versões do jQuery sem nenhum erro.

Atualização: O Jquery 1.6+ possui o novo método prop que substitui attr, por exemplo:

$(objectElement).prop('checked');

2
Esta resposta está desatualizada porque usa em .attrvez de .prop.
Blazemonger

25

Se você estiver usando o PhoneGap no desenvolvimento de aplicativos e tiver um valor no botão que deseja mostrar instantaneamente, lembre-se de fazer isso

$('span.ui-[controlname]',$('[id]')).text("the value");

Descobri que, sem o intervalo, a interface não será atualizada, não importa o que você faça.


25

Aqui está o código e a demonstração de como marcar várias caixas de seleção ...

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});

1; misturar seletores de jQuery como $("#check")com chamadas brutas da API do DOM document.getElementsByTagName("input")parece inelegante para mim, principalmente porque os forloops aqui podem ser evitados usando .prop(). Independentemente disso, é mais uma resposta tardia que não acrescenta nada de novo.
Mark Amery

20

Outra solução possível:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

19

Como o @ livefree75 disse:

jQuery 1.5.xe abaixo

Você também pode estender o objeto $ .fn com novos métodos:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Mas nas novas versões do jQuery, temos que usar algo como isto:

jQuery 1.6+

    (function($)  {
       $.fn.extend({
          check : function()  {
             return this.filter(":radio, :checkbox").prop("checked", true);
          },
          uncheck : function()  {
             return this.filter(":radio, :checkbox").prop("checked",false);
          }
       });
    }(jQuery));

Então você pode simplesmente fazer:

    $(":checkbox").check();
    $(":checkbox").uncheck();

18

Se você estiver usando dispositivos móveis e deseja que a interface atualize e mostre a caixa de seleção como desmarcada, use o seguinte:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

18

Esteja ciente dos vazamentos de memória no Internet Explorer anteriores ao Internet Explorer 9 , conforme a documentação do jQuery :

No Internet Explorer anterior à versão 9, o uso de .prop () para definir uma propriedade do elemento DOM como algo que não seja um valor primitivo simples (número, sequência ou booleano) pode causar vazamentos de memória se a propriedade não for removida (usando .removeProp ( )) antes que o elemento DOM seja removido do documento. Para definir valores com segurança em objetos DOM sem vazamentos de memória, use .data ().


2
Isso é irrelevante, pois todas as respostas (corretas) são usadas .prop('checked',true).
Blazemonger

Não sei se entendi o seu comentário. Isso ainda existe na documentação do jQuery. Você está sugerindo que não há vazamento de memória no IE <9?
naor 21/01

2
Não há vazamento de memória neste caso, uma vez que estão definindo-o como um valor primitivo simples (Boolean).
Blazemonger

18

Para jQuery 1.6+

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

Para jQuery 1.5.xe abaixo

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Checar,

$('.myCheckbox').removeAttr('checked');

17

Para marcar e desmarcar

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

3
1; isso não agrega valor algum a um segmento já inchado. O código aqui é exatamente o mesmo que a resposta aceita.
Mark Amery

16
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

4
- 1 por ser uma resposta apenas de código, por não responder diretamente à pergunta e por não adicionar nada que outras respostas já não tivessem abordado.
Mark Amery

15

Esta é provavelmente a solução mais curta e fácil:

$(".myCheckBox")[0].checked = true;

ou

$(".myCheckBox")[0].checked = false;

Ainda mais curto seria:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

Aqui está um jsFiddle também.


14

JavaScript simples é muito simples e muito menos sobrecarga:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

Exemplo aqui


@ MarkAmery A resposta aceita não cobre como fazê-lo sem o jQuery. Minha resposta adiciona benefício suplementar à resposta aceita.
Alex W

13

Não consegui fazê-lo funcionar usando:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

Verdadeiro e falso marcariam a caixa de seleção. O que funcionou para mim foi:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

16
não deveria ser truee falsee não 'true'e 'false'?
TPower

9
Ele "não funcionou" porque 'false'foi convertido em um valor booleano que resultou em true- uma string vazia é avaliada falsecomo "funcionou". Veja este violino, por exemplo, do que quero dizer.
Shadow Wizard é Ear For You

@ chris97ong Voltei sua edição; quando alguém diz "Não use o código abaixo porque não funciona", corrigi- lo e deixar o comentário dizendo que não funciona é prejudicial - especialmente quando ele quebra a explicação nos comentários de por que o código não está funcionando está trabalhando. Dito isto, essa resposta ainda está um pouco confusa e merece um voto negativo pelas razões apresentadas pela tpower e pelo ShadowWizard.
Mark Amery

1
use valores true e false para booleano, não use 'true' ou 'false' (strings).
21415 Jone Polvora

13

Quando você marcou uma caixa de seleção como;

$('.className').attr('checked', 'checked')

pode não ser suficiente. Você também deve chamar a função abaixo;

$('.className').prop('checked', 'true')

Especialmente quando você removeu o atributo marcado na caixa de seleção.


11

Aqui está a resposta completa usando jQuery

Eu testo e funciona 100%: D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $(':checkbox:checked').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });

10

No jQuery,

if($("#checkboxId").is(':checked')){
    alert("Checked");
}

ou

if($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

Em JavaScript,

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}

7
Isso não responde à pergunta.
Samuel Liew

2
Esta resposta está desatualizada porque usa em .attrvez de .prop.
Blazemonger
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.