Como uma caixa de seleção pode ser marcada / desmarcada usando JavaScript, jQuery ou baunilha?
Como uma caixa de seleção pode ser marcada / desmarcada usando JavaScript, jQuery ou baunilha?
Respostas:
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);
attr
ou prop
?
.checked = true/false
, não dispara o change
evento: - \
Comportamento importante que ainda não foi mencionado:
Definir programaticamente o atributo marcado , não aciona o change
evento 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)
click()
métodoAlgum 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 true
ou false
. Lembre-se de que o change
evento deve ser acionado apenas quando o atributo verificado realmente mudar.
Também se aplica à maneira jQuery: definir o atributo usando prop
or attr
, não dispara o change
evento.
checked
para um valor específicoVocê pode testar o checked
atributo 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
elm.dispatchEvent(new Event('change'));
checar:
document.getElementById("id-of-checkbox").checked = true;
desmarcar:
document.getElementById("id-of-checkbox").checked = false;
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
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.
Tente isto:
//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');
//UnCheck
document.getElementById('chk').removeAttribute('checked');
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 addEventListener
s são apenas para demonstrar como funciona.
Para uma verificação única, tente
para multi try
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()