Kliknij, aby przełączyć z jQuery

Question

Użyłem funkcji hover, gdzie robisz x na mouseover i y i mouseout. Próbuję to samo dla kliknięcia, ale nie wydaje się działać:

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

Chcę pole wyboru, aby być sprawdzana po kliknięciu na div, a niezaznaczone jeśli kliknięciu ponownie - przełącznik kliknięć.

Answer 1

to łatwo zrobić przez skakaniu prąd „sprawdzone” stan pola wyboru przy każdym kliknięciu. Przykłady:

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

czyli

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

lub poprzez bezpośrednie manipulowanie DOM 'zaznaczone' właściwości (czyli nie korzystając attr() do sprowadzić aktualny stan klikniętego wyboru):

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

... i tak dalej.

Uwaga: ponieważ jQuery 1.6, pola wyboru, należy ustawić za pomocą prop nie attr:

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

Answer 2

spróbować zmienić to:

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

do tego:

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

Nie 100% pewien, że jeśli to zrobi, ale wydaje mi się przypomnieć mające podobny problem. Powodzenia!

Answer 3

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

Answer 4

Można użyć toggle funkcję:

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

Answer 5

w jQuery nie sądzę, że kliknięcie() przyjmuje dwie funkcje przełączania. Powinieneś użyć funkcji toggle(): http://docs.jquery.com/Events/toggle

Answer 6

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

Answer 7

Dlaczego nie w jednej linii?

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

Answer 8

Innym rozwiązaniem byłoby rozszerzonego jQuery tak:

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

Następnie zadzwonić:

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

Answer 9

Ostrzeżenie: używanie attr() lub podporę() zmienić stan pola wyboru nie oznacza wystrzelenia z ch ange event w większości przeglądarek, z którymi testowałem. Sprawdzony stan zmieni się, ale nie będzie bąbelkowania zdarzeń. Zdarzenie zmiany należy wywołać ręcznie po ustawieniu sprawdzanego atrybutu. Miałem kilka innych programów do obsługi zdarzeń monitorujących stan pól wyboru i działałyby dobrze z bezpośrednimi kliknięciami użytkowników. Jednak programatyczne ustawianie stanu sprawdzanego nie powoduje konsekwentnego wyzwalania zdarzenia zmiany.

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 10

mam jedną opcję o nazwie chkDueDate i obiekt HTML z zdarzenie click następująco:

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

Kliknięcie obiektu HTML (w tym przypadku <span>) przełącza zaznaczona właściwość pola wyboru.

Answer 11

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

Answer 12

Najprostszym rozwiązaniem

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

Answer 13

Kolejne rozwiązanie alternatywne do przełączania wartości pola wyboru:

<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 14

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

Answer 15

jQuery: Najlepszy sposób przekazać działania jQuery (jQuery = jQuery).

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