Marque / desmarque a caixa de seleção com JavaScript (jQuery ou baunilha)?


Respostas:


975

Javascript:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);

O uso de .prop parece não funcionar com o Jquery 1.11.2 no Firefox com arquivos hospedados localmente. .attr faz. Eu não testei mais completamente. Aqui está o código: `` `personContent.find (" [data-name = '"+ pass.name +"'] "). Children ('input'). Attr ('marcado', true); ``
Andrew Downes

3
Devemos preferir usar attrou prop?
Preto

15
Aparentemente .checked = true/false, não dispara o changeevento: - \
leaf

1
@ albert: por que você mudou as atribuições para testes estritos de igualdade? Você quebrou a resposta.
Martijn Pieters

você está certo. isso é totalmente ruim. desculpe por isso
albert

136

Comportamento importante que ainda não foi mencionado:

Definir programaticamente o atributo marcado , não aciona o changeevento da caixa de seleção .

Veja você mesmo neste violino:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle testado no Chrome 46, Firefox 41 e IE 11)

o click() método

Algum dia você poderá escrever um código, que depende do evento ser disparado. Para garantir que o evento seja acionado, chame o click()método do elemento checkbox, assim:

document.getElementById('checkbox').click();

No entanto, isso alterna o status marcado da caixa de seleção, em vez de configurá-lo especificamente para trueou false. Lembre-se de que o changeevento deve ser acionado apenas quando o atributo verificado realmente mudar.

Também se aplica à maneira jQuery: definir o atributo usando propor attr, não dispara o changeevento.

Definindo checkedpara um valor específico

Você pode testar o checkedatributo antes de chamar o click()método Exemplo:

function toggle(checked) {
  var elm = document.getElementById('checkbox');
  if (checked != elm.checked) {
    elm.click();
  }
}

Leia mais sobre o método click aqui:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click


8
Essa é uma resposta boa, mas pessoalmente eu preferiria para disparar o evento de alteração em vez de chamar o clique () elm.dispatchEvent(new Event('change'));
Victor Sharovatov

@VictorSharovatov Por que você prefere disparar o evento de mudança?
PeterCo

2
Posso concordar apenas parcialmente - muitos navegadores da web com adblocks estão defendendo DOM do botão virtual () devido a ações indesejadas de anúncios
pkolawa

2
@PeterCo: Provavelmente porque retrata com mais clareza a intenção - clique no elemento para disparar o evento de mudança versus despache um evento de mudança para disparar um evento de mudança - indireto (o clique aciona a mudança) versus direto. O último é consideravelmente mais claro e não exige que o leitor saiba que um clique aciona uma alteração.
Bill Dagg

37

checar:

document.getElementById("id-of-checkbox").checked = true;

desmarcar:

document.getElementById("id-of-checkbox").checked = false;

2
Isso mudaria apenas o atributo verificado. No entanto, eventos onclick e similares não serão acionados.
Paul Stelian

17

Podemos marcar uma caixa de seleção de partículas como,

$('id of the checkbox')[0].checked = true

e desmarque por,

$('id of the checkbox')[0].checked = false

1
Você realmente não precisa do índice da matriz se estiver selecionando apenas um elemento. Mas acho que se você quiser ser explícito. haha
Rizowski

6
@Rizowski Você precisa fazer o índice para obter o elemento HTML nativo - objetos jQuery não tem um "marcada" propriedade
Henrik Christensen

Isso tem funcionado para mim. Sem o índice da matriz, eu estava recebendo um erro indefinido. Muito obrigado, salvou o meu dia.
Neri #

15

Gostaria de observar que definir o atributo 'marcado' como uma seqüência de caracteres não vazia leva a uma caixa marcada.

Portanto, se você definir o atributo 'marcado' como "falso" , a caixa de seleção será marcada. Eu tive que definir o valor para a string vazia, null ou o valor booleano false , para garantir que a caixa de seleção não estivesse marcada.


5
Isso ocorre porque uma sequência não vazia é considerada verdadeira.
James Coyle

10

Tente isto:

//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');

//UnCheck
document.getElementById('chk').removeAttribute('checked');

6
<script type="text/javascript">
    $(document).ready(function () {
        $('.selecctall').click(function (event) {
            if (this.checked) {
                $('.checkbox1').each(function () {
                    this.checked = true;
                });
            } else {
                $('.checkbox1').each(function () {
                    this.checked = false;
                });
            }
        });

    });

</script>

6
function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}

3

Se, por algum motivo, você não quiser (ou não puder) executar um .click()elemento na caixa de seleção, basta alterar seu valor diretamente por meio da propriedade .checked (um atributo IDL de <input type="checkbox">).

Observe que isso não dispara o evento normalmente relacionado ( altere ), portanto, você precisará acioná-lo manualmente para ter uma solução completa que funcione com qualquer manipulador de eventos relacionados.

Aqui está um exemplo funcional em javascript bruto (ES6):

class ButtonCheck {
  constructor() {
    let ourCheckBox = null;
    this.ourCheckBox = document.querySelector('#checkboxID');

    let checkBoxButton = null;
    this.checkBoxButton = document.querySelector('#checkboxID+button[aria-label="checkboxID"]');

    let checkEvent = new Event('change');
    
    this.checkBoxButton.addEventListener('click', function() {
      let checkBox = this.ourCheckBox;

      //toggle the checkbox: invert its state!
      checkBox.checked = !checkBox.checked;

      //let other things know the checkbox changed
      checkBox.dispatchEvent(checkEvent);
    }.bind(this), true);

    this.eventHandler = function(e) {
      document.querySelector('.checkboxfeedback').insertAdjacentHTML('beforeend', '<br />Event occurred on checkbox! Type: ' + e.type + ' checkbox state now: ' + this.ourCheckBox.checked);

    }


    //demonstration: we will see change events regardless of whether the checkbox is clicked or the button

    this.ourCheckBox.addEventListener('change', function(e) {
      this.eventHandler(e);
    }.bind(this), true);

    //demonstration: if we bind a click handler only to the checkbox, we only see clicks from the checkbox

    this.ourCheckBox.addEventListener('click', function(e) {
      this.eventHandler(e);
    }.bind(this), true);


  }
}

var init = function() {
  const checkIt = new ButtonCheck();
}

if (document.readyState != 'loading') {
  init;
} else {
  document.addEventListener('DOMContentLoaded', init);
}
<input type="checkbox" id="checkboxID" />

<button aria-label="checkboxID">Change the checkbox!</button>

<div class="checkboxfeedback">No changes yet!</div>

Se você executar isso e clicar na caixa de seleção e no botão, deverá ter uma noção de como isso funciona.

Observe que usei document.querySelector por questões de brevidade / simplicidade, mas isso pode ser facilmente desenvolvido para que um ID específico seja passado ao construtor ou pode ser aplicado a todos os botões que atuam como etiquetas de ária para uma caixa de seleção (observe que eu não se incomodou em definir um ID no botão e atribuir à caixa de seleção um marcador de ária, o que deve ser feito se você usar esse método) ou várias outras maneiras de expandir isso. Os dois últimos addEventListeners são apenas para demonstrar como funciona.


2

Para uma verificação única, tente

myCheckBox.checked=1
<input type="checkbox" id="myCheckBox"> Call to her

para multi try


2

Concordo com as respostas atuais, mas, no meu caso, não funciona, espero que este código ajude alguém no futuro:

// check
$('#checkbox_id').click()
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.