Como desmarcar a caixa de seleção usando a biblioteca uniforme do jQuery


144

Estou com um problema ao desmarcar a checkbox. Dê uma olhada no meu jsFiddle , onde estou tentando:

   $("#check2").attr("checked", true);

Eu uso uniforme para estilizar o checkboxe simplesmente não funciona para marcar / desmarcar o checkbox.

Alguma ideia?


tanto no Google Chrome e Firefox ele não funciona para mim
— Upvote

Respostas:


108

Analisando os documentos, eles têm um $.uniform.updaterecurso para atualizar um elemento "uniformizado".

Exemplo: http://jsfiddle.net/r87NH/4/

$("input:checkbox").uniform();

$("body").on("click", "#check1", function () {
    var two = $("#check2").attr("checked", this.checked);
    $.uniform.update(two);
});

5
@mkoryak: Funciona bem 1.4.4, mas os links para os arquivos js e css foram quebrados. Aqui está um violino atualizado. Se você quer dizer que haverá problemas especificamente 1.6, provavelmente isso é verdade, pois o jQuery mudou e reverteu o comportamento de .attr(). Usando 1.6ou superior, você realmente deveria estar usando .prop().
— user113716

Não vejo absolutamente nenhuma diferença entre o jsFiddle atualizado e o original (até a marcação incorreta da caixa de seleção 2), exceto que a versão atualizada funciona para mim e o original não!?!?
— precisa saber é o seguinte

Aliás, todos esses formulários uniformes desenhados por pixels parecem muito pouco atraentes na Retina.
— encarnada

não funcionou para mim também jsFiddle não funciona ou é confuso
— Matthy

367

Uma solução mais simples é fazer isso em vez de usar uniforme:

$('#check1').prop('checked', true); // will check the checkbox with id check1
$('#check1').prop('checked', false); // will uncheck the checkbox with id check1

Isso não acionará nenhuma ação de clique definida.

Você também pode usar:

$('#check1').click(); // 

Isso irá ativar / desativar a seleção da caixa de seleção, mas também acionará qualquer ação de clique que você definiu. Por isso tem cuidado.

EDIT : jQuery 1.6+ usa prop()não attr()para caixas de seleção valor marcado


2
Isso deixa o atributo verificado como está no jQuery 1.7.1 para mim. Funciona, mas não faz o que você pensa que deveria.
— 2rs2ts

24
$("#chkBox").attr('checked', false); 

Isso funcionou para mim, desmarcará a caixa de seleção. Da mesma maneira que podemos usar

$("#chkBox").attr('checked', true); 

para marcar a caixa de seleção.


4
Eu acho que é melhor usar a função .prop () em vez de .attr (). Caso contrário não vai funcionar sempre como esperado ...
— Simon Steinberger

13

Se você estiver usando o uniforme 1.5 , use este truque simples para adicionar ou remover o atributo check.
Basta adicionar value = "check" no campo de entrada da caixa de seleção.
Adicione este código em uniform.js> function doCheckbox(elem){>.click(function(){

if ( $(elem+':checked').val() == 'check' ) {
    $(elem).attr('checked','checked');           
}
else {
    $(elem).removeAttr('checked');
}   

se você não deseja adicionar valor = "marcar" na sua caixa de entrada, porque em alguns casos você adiciona duas caixas de seleção, use isso

if ($(elem).is(':checked')) {
 $(elem).attr('checked','checked');
}    
else
{    
 $(elem).removeAttr('checked');
}

Se você estiver usando o uniforme 2.0 , use este truque simples para adicionar ou remover o atributo de verificação
nessa classUpdateChecked($tag, $el, options) {alteração de função

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
}

Para

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
    if (isChecked) {
        $el.attr(c, c);
    } else {
        $el.removeAttr(c);
    }

}

7
$('#check1').prop('checked', true).uniform(); 
$('#check1').prop('checked', false).uniform(); 

Isso funcionou para mim.


Muito obrigado. Posso confirmar que esta é a solução mais simples.
— Rudolph Opperman

2

Apenas faça o seguinte:

$('#checkbox').prop('checked',true).uniform('refresh');

1

você precisa ligar $.uniform.update()se atualizar o elemento usando javascript, conforme mencionado na documentação.


1

Primeiro de tudo, checkedpode ter um valor de checkedou uma sequência vazia.

$("input:checkbox").uniform();

$('#check1').live('click', function() {
    $('#check2').attr('checked', 'checked').uniform();
});

Não há nada errado em passar um valor booleano como o valor de checked.
— user113716

Mas não estamos escrevendo marcação HTML. Estamos definindo uma propriedade no HTMLInputElement. Dê uma olhada na checkedpropriedade.
— user113716

Não importa ... eu realmente não entendo por que isso é inválido também ...
— nyuszika7h 15/02/11

a passagem de um valor booleano é suportada apenas na versão 1.6+, antes era necessário definir o atributo verificado como 'verificado' ou removê-lo.
— Mkoryak

1

Em alguns casos, você pode usar isso:

$('.myInput').get(0).checked = true

Para alternar, você pode usar se mais com a função


1

 $("#checkall").change(function () {
            var checked = $(this).is(':checked');
            if (checked) {
                $(".custom-checkbox").each(function () {
                    $(this).prop("checked", true).uniform();
                });
            } else {
                $(".custom-checkbox").each(function () {
                    $(this).prop("checked", false).uniform();
                });
            }
        });

        // Changing state of CheckAll custom-checkbox
        $(".custom-checkbox").click(function () {
            if ($(".custom-checkbox").length == $(".custom-checkbox:checked").length) {
                $("#chk-all").prop("checked", true).uniform();
            } else {
                $("#chk-all").removeAttr("checked").uniform();
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id='checkall' /> Select All<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="PHP"> PHP<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="AngularJS"> AngularJS<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="Python"> Python<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="Java"> Java<br/>


0

A outra maneira de fazer é,

usar $('#check2').click();

isso faz com que uniforme marque a caixa de seleção e atualize suas máscaras


-1

caixa de seleção que age como rádio btn

$(".checkgroup").live('change',function() { var previous=this.checked; $(".checkgroup).attr("checked", false); $(this).attr("checked", previous); });

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.