Klicken Sie auf Toggle mit jQuery

Question

Ich habe eine Hover-Funktion verwendet, wo man x auf Mouseover und y und mouseout tun. Ich versuche, das gleiche gilt für Klick, aber es scheint nicht zu funktionieren:

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

Ich mag das Kontrollkästchen aktiviert werden, wenn auf einem div klicken, und nicht markiert, wenn erneut geklickt - einen Klick Toggle

.

Answer 1

Das ist leicht getan, indem der aktuelle ‚geprüft‘ Zustand der Checkbox bei jedem Klick Spiegeln. Beispiele:

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

oder:

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

oder durch den DOM direkt Manipulation 'geprüft' Eigenschaft (das heißt nicht mit attr() zu holen dem aktuellen Zustand der angeklickten Checkbox):

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

... und so weiter.

Hinweis: da jQuery 1.6, Kontrollkästchen sollte eingestellt werden prop nicht attr:

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

Answer 2

würde Ein weiterer Ansatz zum erweiterten jquery so aussehen:

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

Dann rufen:

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

Answer 3

Achtung: mit attr () oder prop () , um den Zustand einer Checkbox ändern nicht Feuer Änderungsereignis in den meisten Browsern ich getestet habe. Der Überprüfungsstatus wird sich ändern, aber kein Ereignis sprudeln. Sie müssen die Änderungsereignis auslösen manuell nach dem Attribut checked Einstellung. Ich hatte ein paar andere Event-Handler den Zustand der Kontrollkästchen Überwachung und sie würden mit direktem Benutzer klickt gut funktionieren. Allerdings scheitert die Überprüfungsstatus Einstellung programmatisch konsequent das Änderungsereignis auslösen.

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

könnten Sie verwenden die toggle Funktion:

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

Answer 5

Warum nicht in einer Linie?

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

Answer 6

Ich habe ein einziges Kontrollkästchen namens chkDueDate und ein HTML-Objekt mit einem Klick-Ereignis wie folgt:

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

Wenn Sie auf das HTML-Objekt (in diesem Fall ein <span>) schaltet die geprüfte Eigenschaft der Checkbox.

Answer 7

jQuery. Bester Weg, delegiert die Aktionen jQuery (jQuery = jQuery)

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

Answer 8

versuchen, dies zu ändern:

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

folgt aus:

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

nicht 100% sicher, ob es das tun, aber ich glaube ich zu erinnern, ein ähnliches Problem. Viel Glück!

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

In JQuery Ich glaube nicht, dass Sie auf () für Hin- und Herschalten zwei Funktionen übernehmen. Sie sollten den Knebel () Funktion für das verwenden: http://docs.jquery.com/Events/toggle

Answer 11

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

Answer 12

Die einfachste Lösung

$('.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

Eine weitere alternative Lösung Checkbox Wert umzuschalten:

<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);
});