ti-enxame.com

Definir "marcada" por uma caixa de seleção com jQuery?

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

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

ou 

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

Será que tal coisa existe?

3783
tpower

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, então você precisa usar .attr() .

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

Observe que isso é a abordagem usada pelos testes de unidade do jQuery anteriores à versão 1.6 e é preferível usar

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

já que este último, se a caixa foi inicialmente verificada, muda o comportamento de uma chamada para .reset() em qualquer formulário que o 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 no notas de versão 1.6 e no Attributes vs. Seção Properties do documentação .prop() .

Qualquer versão do jQuery

Se você está trabalhando com apenas um elemento, você pode apenas modificar a propriedade .checked do HTMLInputElement :

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

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

5626
Xian

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');
660
bchhun

Esta é a maneira correta de marcar e desmarcar as caixas de seleção com jQuery, como é padrão multi-plataforma, e will 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 caixas de seleção, portanto, qualquer navegador que implemente corretamente a propriedade "checked" do elemento checkbox executará este código sem falhas. Este deve ser todos os principais navegadores, mas não consigo testar anterior ao Internet Explorer 9.

O problema (jQuery 1.6):

Quando 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 de alguém terclicado a caixa de seleção (isso acontece no Chrome).

Fiddle

A solução:

Usando a propriedade "checked" do JavaScript nos elementos DOM , podemos resolver o problema diretamente, em vez de tentar manipular o DOM para fazer o que queremosfazer.

Fiddle

Este plugin irá alterar a propriedade marcada de quaisquer elementos selecionados pelo jQuery, e com sucesso marcar 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;
});
295
cwharris

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 para a caixa de seleção que deseja disparar, use este:

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

Você pode desmarcar removendo o atributo totalmente:

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

Você pode marcar todas as caixas de seleção da seguinte forma:

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

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.

75
livefree75
$("#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 ativarão. Portanto, se você tiver um código personalizado no evento onclick para a caixa de seleção que deseja disparar, use o último.

64
Chris Brandsma

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 configurá-la como falsa:

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

BAD DEMO jQuery 1.6 . Eu acho que isso está quebrado. Para o 1.6, vou fazer um novo post sobre isso.

NOVA DEMONSTRAÇÃO DE TRABALHO jQuery 1.5.2 funciona no Chrome.

Ambos os demos usam

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

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, diferem pelo atributo value: 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);
44
Peter Krauss

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

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

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.

44
Abou-Emish

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 jQuery 1.5 ou inferior:

checkbox.attr('checked', true);

Para desmarcar, use:

checkbox.attr('checked', false);
40
Ramon de Jesus

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>

35
Aeoril

Tente isto:

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

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

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

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');
26
Prasanth P

Se você estiver usando PhoneGap fazendo desenvolvimento de aplicativos, e você tem um valor no botão que você 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
Clement Ho

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

Outra solução possível:

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

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

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 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 ().

18
naor

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');
18
logan

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

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

Para marcar e desmarcar

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
17
jj2422
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
16
mahmoh

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();
16
Ardalan Shahgholi

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á a jsFiddle também.

15
frieder

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

14
Alex W

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

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

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

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

Especialmente quando você removeu o atributo checkbox checkbox.

13
Serhat Koroglu

Eu não consegui fazer funcionar 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
13
fredcrs

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

Caso você use ASP.NET MVC , gere muitas caixas de seleção e depois tenha para selecionar/cancelar a seleção de todos usando JavaScript, você pode fazer o seguinte.

HTML

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

JavaScript

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }
10
Academy of Programmer

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

Isso pode ajudar alguém.

HTML5

 <input id="check_box" type="checkbox" onclick="handleOnClick()">

JavaScript.

  function handleOnClick(){

      if($("#check_box").prop('checked'))
      {        
          console.log("current state: checked");
      }
      else
      {         
          console.log("current state: unchecked");
      }    
 }
7
Sedrick

Você pode tentar isto:

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
5
anusha
$(".myCheckBox").prop("checked","checked");
4
mathew

if($('jquery_selector').is(":checked")){
  //somecode
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

4
David Arul

Se você estiver usando o Bootstrap (talvez sem ajuda) ...

$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')

http://www.bootstraptoggle.com/

3
Kenmeister

Se você estiver usando .prop('checked', true|false) e não tiver alterado checkbox , você precisa adicionar trigger('click') assim

//check
$('#checkboxF1').prop( "checked", true).trigger('click');


//un-Check
$('#checkboxF1').prop( "checked", true).trigger('click');
1
Alex Montoya

Você pode verificar a condição marcada da caixa de seleção usando JS de maneiras diferentes. você pode ver abaixo.

  1. Primeiro método - $('.myCheckbox').prop('checked', true);

  2. Segundo método - $('.myCheckbox').attr('checked', true);

  3. Terceiro Método (para verificar se a caixa de seleção está marcada ou não) - $('.myCheckbox').is(':checked')

1
Gaurang Sondagar

Editado em 2019 janeiro

Você pode usar: .prop (propertyName) - versão adicionada: 1.6

p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    "The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    "The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    "The .is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>

Na estrutura Angular

Exemplo 1

No seu arquivo .html

<input type="checkbox" (change)="toggleEditable($event)">

No seu arquivo .ts

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

Exemplo 2

No seu arquivo .html

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />
0
Lyes CHIOUKH