Definindo “marcada” para uma caixa com jQuery?

StackOverflow https://stackoverflow.com/questions/426258

Pergunta

Eu gostaria de fazer algo assim para assinalar um checkbox usando jQuery : 

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

ou 

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

Será que tal coisa existe?

Foi útil?

Solução

jQuery 1.6 +

Use o novo href="https://api.jquery.com/prop" rel="noreferrer"> .prop() método : 

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

jQuery 1.5.x e abaixo

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

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

Note que este é a abordagem utilizada por unidade do jQuery testa antes da versão 1.6 e é preferível à utilização de 

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

desde a última vontade, se a caixa foi inicialmente marcada, alterar o comportamento de uma chamada para .reset() em qualquer forma que o contém -. uma sutil, mas provavelmente indesejável mudança de comportamento

Para mais contexto, alguma discussão incompleta das alterações para a movimentação do atributo checked / propriedade na transição da 1.5.x a 1,6 pode ser encontrado no versão 1.6 notas de lançamento eo Atributos vs. Propriedades do documentação .prop()

Qualquer versão do jQuery

Se você está trabalhando com apenas um elemento, você sempre pode simplesmente modificar o HTMLInputElement 's .checked propriedade: 

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

A vantagem de se utilizar os métodos .prop() e .attr() em vez disso é que eles vão operar em todos os elementos combinados.

Outras dicas

Use: 

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

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

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

Esta é a maneira correta de verificação e caixas de seleção desmarcando com jQuery, como é padrão multi-plataforma, e irá permitir formulário reposts. 

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

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

Ao fazer isso, você está usando padrões JavaScript para verificação e caixas de seleção desmarcando, portanto, qualquer navegador que corretamente implementa o "marcada" propriedade do elemento caixa de seleção será executado este código na perfeição. Este deve ser todos os principais navegadores, mas eu sou incapaz de testar anterior para Internet Explorer 9.

O Problema (jQuery 1.6):

Uma vez que um usuário clica em uma caixa de seleção, que checkbox pára de responder ao "marcada" alterações de atributo.

Aqui está um exemplo do atributo caixa deixando de fazer o trabalho depois que alguém tem clicado na caixa de seleção (isso acontece no Chrome).

Fiddle

Solução:

Ao usar JavaScript do "marcada" propriedade no DOM , somos capazes de resolver o problema diretamente, em vez de tentando manipular o DOM para fazer o que nós deseja que ele faça.

Fiddle

Este plugin irá alterar a propriedade checked de quaisquer elementos selecionados pelo jQuery, e com sucesso verificar e caixas desmarque sob todas as circunstâncias. Então, enquanto isso pode parecer uma solução sobre-rolamento, ele vai fazer a experiência do usuário do seu site melhor, e ajudar a prevenir 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, você pode usar os trechos de código a seguir: 

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

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

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

Você pode fazer 

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

ou 

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

Se você tem um código personalizado no evento onclick para a caixa de seleção que você deseja fogo, use este outro: 

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

Você pode desmarcar removendo o atributo inteiramente: 

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

Você pode verificar todas as caixas como esta: 

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

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));

Em seguida, você pode apenas fazer: 

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

Ou você pode querer dar-lhes nomes mais exclusivos como mycheck () e myuncheck () no caso de você usar alguma outra biblioteca que usa esses nomes. 

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

A última irá disparar o evento clique para a caixa de seleção, os outros não. Então se você tem um código personalizado no evento onclick para a caixa de seleção que deseja incêndio, utilize o último.

Para verificar uma caixa de seleção que você deve usar 

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

ou 

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

e desmarque a caixa de seleção você deve sempre configurá-lo para false: 

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

Se você fizer 

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

remove o atributo de todos juntos e, portanto, você não será capaz de redefinir a forma.

BAD DEMONSTRA jQuery 1.6 . Eu acho que isso é quebrado. Para 1,6 Vou fazer um novo post sobre isso.

NOVO TRABALHO DE DEMONSTRA jQuery 1.5.2 funciona no Chrome.

Ambos demos usar 

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

isto selecciona os elementos que têm o atributo específico com um valor que contém o determinado subsequência "ckbItem": 

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

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

Assumindo que a pergunta é ...

Como posso verificar uma caixa-set POR VALOR?

Lembre-se que em um conjunto de caixa típico, todos os tags de entrada tem o mesmo nome, eles diferem pelo atributo value :. Não existem ID para cada entrada do conjunto

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

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

Eu estou faltando a solução. Eu sempre vou usar: 

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

Para verificar uma caixa de seleção usando jQuery 1.6 ou superior apenas fazer isso: 

checkbox.prop('checked', true);

Para desmarcar, use: 

checkbox.prop('checked', false);

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

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

Se você estiver usando jQuery 1.5 ou inferior: 

checkbox.attr('checked', true);

Para desmarcar, use: 

checkbox.attr('checked', false);

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>

Tente isto: 

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

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

Aqui está o código para verificar e sem controle 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;
    });
});

Update: Aqui é o mesmo bloco de código usando o mais recente Jquery 1.6+ método prop, 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;
    });
});

Podemos usar elementObject com jQuery para obter o atributo checked: 

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

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

Update: Jquery 1.6+ tem o novo método prop que substitui attr, por exemplo:. 

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

Se você estiver usando PhoneGap desenvolvimento de aplicações fazendo, e você tem um valor no botão que você quer mostrar instantaneamente , lembre-se de fazer isso 

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

Descobri que sem a extensão, a interface não irá atualizar, não importa o que você faz.

Aqui está o código e demo de como verificar caixas de múltipla 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;
        }
    }
});

Outra solução possível: 

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

Se usar celular e você quer que a interface de atualização e mostrar a caixa de seleção como desmarcada, use o seguinte: 

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

Esteja ciente de vazamentos de memória no Internet Explorer antes Internet Explorer 9 , como o jQuery documentação estados :

No Internet Explorer anteriores à versão 9, utilizando .prop () para definir um DOM elemento de propriedade para algo diferente de um valor primitivo simples (Número, string ou boolean) pode causar vazamentos de memória se a propriedade é não removido (utilizando .removeProp ()) antes de o elemento DOM é removido do documento. Para definir com segurança os valores em objetos DOM sem memória vazamentos, uso .data ().

Para jQuery 1.6 + 

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

Para jQuery 1.5.x e abaixo 

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

Para verificar, 

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

Para verificar e desmarque 

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

Como @ livefree75 disse:

jQuery 1.5.x e 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 em novas versões do jQuery, nós 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));

Em seguida, você pode apenas fazer: 

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

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

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

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

ou 

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

Mesmo mais curta seria: 

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

Aqui está um jsFiddle também.

Plain JavaScript é muito simples e muito menos sobrecarga: 

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

aqui

Eu não poderia fazê-lo funcionar usando: 

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

Tanto o verdadeiro eo falso iria verificar a caixa de seleção. O que funcionou para mim foi: 

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

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

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

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

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

Especialmente quando você removeu a caixa de seleção marcada atributo.

Aqui está a resposta completa usando jQuery

Eu testá-lo e ele 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
    });

Em jQuery, 

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

ou 

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

Em JavaScript, 

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top