Eu gostaria de fazer algo assim para marcar um jQuerycheckbox
usando :
$(".myCheckBox").checked(true);
ou
$(".myCheckBox").selected(true);
Será que tal coisa existe?
$("#mycheckbox").click();
Eu gostaria de fazer algo assim para marcar um jQuerycheckbox
usando :
$(".myCheckBox").checked(true);
ou
$(".myCheckBox").selected(true);
Será que tal coisa existe?
$("#mycheckbox").click();
Respostas:
Use .prop()
:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
Se você estiver trabalhando com apenas um elemento, sempre poderá acessar o subjacente HTMLInputElement
e modificar sua .checked
propriedade:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
O benefício de usar os métodos .prop()
e em .attr()
vez disso é que eles operarão em todos os elementos correspondentes.
O .prop()
método não está disponível, então você precisa usá-lo .attr()
.
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
Observe que esta é a abordagem usada pelos testes de unidade do jQuery anteriores à versão 1.6 e é preferível usar, $('.myCheckbox').removeAttr('checked');
pois os últimos irão, se a caixa foi marcada inicialmente, alterar o comportamento de uma chamada para .reset()
qualquer forma que a contenha - uma sutil, mas provavelmente mudança de comportamento indesejável.
Para obter mais contexto, alguma discussão incompleta das alterações no tratamento do checked
atributo / propriedade na transição de 1.5.x para 1.6 pode ser encontrada nas notas de versão da versão 1.6 e na seção Atributos vs. Propriedades da .prop()
documentação .
DOMElement.checked = true
". Mas seria insignificante, porque é apenas um elemento ...
$(element).prop('checked')
é um completo desperdício de digitação. element.checked
existe e deve ser utilizado nos casos em que você já temelement
Usar:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
E se você deseja verificar se uma caixa de seleção está marcada ou não:
$('.myCheckbox').is(':checked');
Esta é a maneira correta de verificar e desmarcando caixas com jQuery, como é padrão multi-plataforma, e vai permitir que formam reposts.
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
Ao fazer isso, você está usando os padrões JavaScript para marcar e desmarcar as caixas de seleção, para que qualquer navegador que implemente adequadamente a propriedade "marcada" do elemento da caixa de seleção execute esse código na perfeição. Esses devem ser os principais navegadores, mas não consigo 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 para de responder às alterações do atributo "marcado".
Aqui está um exemplo do atributo checkbox falhando ao executar o trabalho depois que alguém clicou na caixa de seleção (isso acontece no Chrome).
A solução:
Usando a propriedade "marcada" 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.
Este plugin alterará a propriedade marcada de qualquer elemento selecionado pelo jQuery e marcará e desmarcará com êxito as caixas de seleção em todas as circunstâncias. Portanto, embora isso possa parecer uma solução excessiva, ele melhorará a experiência do usuário do site 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;
});
removeAttr('checked')
vez deattr('checked', false)
checked
alterações de atributos, independentemente do método usado para alterá-las.
$('.myCheckBox').prop('checked', true)
Dessa forma, ele se aplicará automaticamente a todo o conjunto de elementos correspondentes (somente ao definir, porém, get ainda é o primeiro) #
prop
é definitivamente a maneira apropriada de definir atributos em um elemento.
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 da caixa de seleção que deseja acionar, use este:
$("#mycheckbox").click();
Você pode desmarcar removendo o atributo completamente:
$('.myCheckbox').removeAttr('checked')
Você pode marcar todas as caixas de seleção como esta:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
$(".myCheckbox").click()
.attr
vez de .prop
.
$("#mycheckbox").click();
trabalhou para mim como eu estava ouvindo mudar evento também e .attr
& .prop
não disparou evento de mudança.
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 simplesmente fazer:
$(":checkbox").check();
$(":checkbox").uncheck();
Ou você pode dar a eles nomes mais exclusivos, como mycheck () e myuncheck (), caso você utilize alguma outra biblioteca que use esses nomes.
.attr
vez de .prop
.
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
O último acionará o evento click para a caixa de seleção, os outros não. Portanto, se você tiver um código personalizado no evento onclick da caixa de seleção que deseja acionar, use o último.
.attr
vez de .prop
.
click
evento não é confiável no Firefox e Edge.
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 defini-la como false:
$('.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.
MAQ DEMO jQuery 1.6 . Eu acho que isso está quebrado. Para a 1.6 vou fazer um novo post sobre isso.
NOVA DEMO DE TRABALHO O jQuery 1.5.2 funciona no Chrome.
Ambas as demos usam
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
$(".mycheckbox").prop("checked", true/false)
Isso seleciona elementos que têm o atributo especificado com um valor que contém a substring "ckbItem" fornecida:
$('input[name *= ckbItem]').prop('checked', true);
Ele selecionará todos os elementos que contêm ckbItem em seu atributo name.
Supondo que a pergunta seja ...
Lembre-se de que em um conjunto de caixas de seleção típico, todas as tags de entrada têm o mesmo nome, diferem pelo atributovalue
: 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);
Estou sentindo falta da solução. Eu sempre vou usar:
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
.val()
sempre retornará undefined
quando chamado pelos elementos 0 para detectar que um objeto jQuery está vazio, quando você poderia basta verificar o seu .length
) - consulte stackoverflow.com/questions/901712/… para obter abordagens mais legíveis.
Para marcar uma caixa de seleção usando o 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 o 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);
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>
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 Jquery 1.6+ mais recente, 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;
});
});
.attr
vez de .prop
.
Podemos usar o elementObject
jQuery para obter o atributo verificado:
$(objectElement).attr('checked');
Podemos usar isso para todas as versões do jQuery sem nenhum erro.
Atualização: O Jquery 1.6+ possui o novo método prop que substitui attr, por exemplo:
$(objectElement).prop('checked');
.attr
vez de .prop
.
Se você estiver usando o PhoneGap no desenvolvimento de aplicativos e tiver um valor no botão que 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.
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;
}
}
});
$("#check")
com chamadas brutas da API do DOM document.getElementsByTagName("input")
parece inelegante para mim, principalmente porque os for
loops aqui podem ser evitados usando .prop()
. Independentemente disso, é mais uma resposta tardia que não acrescenta nada de novo.
Outra solução possível:
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
Como o @ 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 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));
Então você pode simplesmente fazer:
$(":checkbox").check();
$(":checkbox").uncheck();
Se você estiver usando dispositivos móveis e deseja que a interface atualize e mostre a caixa de seleção como desmarcada, use o seguinte:
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
Esteja ciente dos vazamentos de memória no Internet Explorer anteriores ao Internet Explorer 9 , conforme a documentação do jQuery :
No Internet Explorer anterior à versão 9, o uso de .prop () para definir uma propriedade do elemento DOM como algo que não seja um valor primitivo simples (número, sequência ou booleano) pode causar vazamentos de memória se a propriedade não for 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 ().
.prop('checked',true)
.
Para marcar e desmarcar
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
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.
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;
}
Não consegui fazê-lo funcionar usando:
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
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
true
e false
e não 'true'
e 'false'
?
'false'
foi convertido em um valor booleano que resultou em true
- uma string vazia é avaliada false
como "funcionou". Veja este violino, por exemplo, do que quero dizer.
Quando você marcou uma caixa de seleção como;
$('.className').attr('checked', 'checked')
pode não ser suficiente. Você também deve chamar a função abaixo;
$('.className').prop('checked', 'true')
Especialmente quando você removeu o atributo marcado na caixa de seleção.
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
});
No jQuery,
if($("#checkboxId").is(':checked')){
alert("Checked");
}
ou
if($("#checkboxId").attr('checked')==true){
alert("Checked");
}
Em JavaScript,
if (document.getElementById("checkboxID").checked){
alert("Checked");
}
.attr
vez de .prop
.