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.