Clique alternar com jQuery

Question

Eu usei uma função de foco onde você faz x em mouseover e y e mouseout. Estou tentando o mesmo por clique, mas isso não parece trabalho:

$('.offer').click(function(){ 
  $(this).find(':checkbox').attr('checked', true ); 
},function(){
  $(this).find(':checkbox').attr('checked', false ); 
});

Eu quero que a caixa de seleção para ser verificado ao clicar em um div e desmarcada se clicado novamente - uma alternância clique

.

Answer 1

Isso é facilmente feito por lançando a corrente 'checada' estado da caixa de verificação a cada clique. Exemplos:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

ou

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 });

ou, por manipular diretamente o DOM 'checada' propriedade (ou seja, não usando attr() a buscar o estado atual da caixa de seleção clicada):

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 });

... e assim por diante.

Nota: desde jQuery 1.6, caixas de seleção deve ser definido usando prop não attr:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });

Answer 2

Outra abordagem seria jquery prolongado como este:

$.fn.toggleCheckbox = function() {
    this.attr('checked', !this.attr('checked'));
}

Em seguida, chamar:

$('.offer').find(':checkbox').toggleCheckbox();

Answer 3

Aviso: usando attr () ou prop () para alterar o estado de uma caixa de seleção não fogo a evento de alteração na maioria dos navegadores eu testei com. O estado selecionado vai mudar, mas nenhum evento borbulhando. Você deve acionar o evento de alteração manualmente depois de definir o atributo marcada. Eu tive alguns outros manipuladores de eventos de monitorização do estado de caixas de seleção e que iria trabalhar bem com cliques de usuários diretos. No entanto, definir o estado verificado de forma programática não consegue desencadear consistentemente o evento de alteração.

jQuery 1.6

$('.offer').bind('click', function(){ 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});

Answer 4

Você pode usar o href="http://docs.jquery.com/Events/toggle" rel="noreferrer"> toggle função :

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});

Answer 5

Por que não em uma linha?

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});

Answer 6

Eu tenho uma única caixa de seleção nomeado chkDueDate e um objeto HTML com um evento de clique a seguinte:

$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));

Ao clicar no objeto HTML (neste caso, um <span>) alterna a propriedade verificada do caixa.

Answer 7

jQuery: Best Way, delegar as ações para jQuery (jQuery = jQuery)

.

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});

Answer 8

Tente alterar isto:

$(this).find(':checkbox').attr('checked', true ); 

a esta:

$(this).find(':checkbox').attr('checked', 'checked'); 

Não 100% de certeza se isso vai fazê-lo, mas eu me lembro de ter um problema semelhante. Boa sorte!

Answer 9

$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});

Answer 10

Em JQuery Eu não acho que click () aceita duas funções para alternar. Você deve usar a função de alternância () para isso: http://docs.jquery.com/Events/toggle

Answer 11

$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});

Answer 12

A solução mais fácil

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});

Answer 13

<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>

Answer 14

Outra solução alternativa para valor opção de alternância:

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function(){

    var op = !$(this).parent().find(':checkbox').attr('checked');
    $(this).parent().find(':checkbox').attr('checked', op);

});

Answer 15

    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});