javascript with Definindo “marcado” para uma caixa de seleção com jQuery?




set selected element jquery (24)

Eu estou perdendo a solução. Eu sempre usarei:

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

Eu gostaria de fazer algo assim para marcar uma checkbox usando jQuery :

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

ou

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

Será que tal coisa existe?


Eu não consegui trabalhar usando:

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

Ambos, 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

Aqui está uma maneira de fazer isso 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>


Assumindo que a questão é ...

Como faço para verificar um conjunto de caixas de seleção BY VALUE?

Lembre-se de que, em um conjunto de caixas de seleção típico, todas as tags de entrada possuem o mesmo nome, elas diferem pelo value do atributo : 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);

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

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

Isso seleciona elementos que possuem o atributo especificado com um valor contendo a substring "ckbItem":

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

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


Para marcar uma caixa de seleção usando 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 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);

Podemos usar elementObject com jQuery para obter o atributo verificado:

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

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

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

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

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 mais recente do Jquery 1.6+, que substitui o 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;
    });
});

Outra solução possível:

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

Esteja ciente de vazamentos de memória no Internet Explorer antes do Internet Explorer 9 , como a api.jquery.com/prop do api.jquery.com/prop :

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


Tente isto:

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

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

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


Como @ 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 assim:

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 apenas fazer:

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

Usar:

$(".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');

jQuery 1.6+

Use o novo método .prop() :

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

jQuery 1.5.xe abaixo

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

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

Note que esta é a abordagem usada pelos testes de unidade do jQuery antes da versão 1.6 e é preferível usar

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

já que a última opção, se a caixa foi verificada inicialmente, altera o comportamento de uma chamada para .reset() em qualquer formulário que a contenha - uma mudança de comportamento sutil, mas provavelmente indesejada.

Para mais contexto, algumas discussões incompletas sobre as mudanças na manipulação do atributo / propriedade checked na transição de 1.5.x para 1.6 podem ser encontradas nas notas de lançamento da versão 1.6 e na seção Atributos vs. Propriedades do .prop() documentação .

Qualquer versão do jQuery

Se você estiver trabalhando com apenas um elemento, poderá sempre modificar apenas a propriedade .checked do .checked :

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

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


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

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


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 apenas fazer:

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

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


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.


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

Para marcar e desmarcar

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

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

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

Esta é a maneira correta de marcar e desmarcar caixas de seleção com jQuery, já que é um padrão multi-plataforma, e permitirá repostagens de formulário.

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

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

Ao fazer isso, você está usando padrões JavaScript para marcar e desmarcar as caixas de seleção, portanto, qualquer navegador que implemente corretamente a propriedade "checked" do elemento checkbox executará este código sem falhas. Esses devem ser todos os principais navegadores, mas não posso 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 pára de responder às alterações do atributo "checked".

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

Fiddle

A solução:

Ao usar a propriedade "checked" 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.

Fiddle

Este plugin irá alterar a propriedade marcada de quaisquer elementos selecionados pelo jQuery, e com sucesso verificar e desmarcar caixas de seleção em todas as circunstâncias. Portanto, embora isso possa parecer uma solução com excesso de suporte, isso tornará a experiência do usuário do seu site melhor 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;
});




checked