Klicken Sie auf Mit jQuery umschalten

Ich habe eine Hover-Funktion verwendet, bei der Sie x bei Mouseover und y und Mouseout ausführen. Ich versuche das gleiche 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 möchte, dass das Kontrollkästchen beim Klicken auf a divaktiviert und beim erneuten Klicken deaktiviert wird - ein Klick-Schalter.

Dies ist einfach zu bewerkstelligen, indem bei jedem Klick der aktuelle Status des Kontrollkästchens aktiviert wird. 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 direkte Bearbeitung der DOM-Eigenschaft "geprüft" (dh nicht attr()zum Abrufen des aktuellen Status des angeklickten Kontrollkästchens):

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

...und so weiter.

Hinweis: Seit jQuery 1.6 sollten Kontrollkästchen mit propnot gesetzt werden attr:

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

Ein anderer Ansatz wäre eine erweiterte Abfrage wie folgt:

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

Dann ruf an:

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

Warnung: Wenn Sie attr () oder prop () verwenden , um den Status eines Kontrollkästchens zu ändern, wird das Änderungsereignis in den meisten Browsern, mit denen ich getestet habe, nicht ausgelöst . Der aktivierte Status ändert sich, aber es sprudelt kein Ereignis. Sie müssen das Änderungsereignis manuell auslösen, nachdem Sie das aktivierte Attribut festgelegt haben. Ich hatte einige andere Ereignishandler, die den Status von Kontrollkästchen überwachten, und sie würden mit direkten Benutzerklicks gut funktionieren. Das programmgesteuerte Festlegen des aktivierten Status löst das Änderungsereignis jedoch nicht konsistent aus.

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

Sie könnten die toggleFunktion verwenden:

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

Warum nicht in einer Zeile?

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

Ich habe ein einzelnes Kontrollkästchen mit dem Namen chkDueDateund ein HTML-Objekt mit einem Klickereignis wie folgt:

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

Durch Klicken auf das HTML-Objekt (in diesem Fall a <span>) wird die aktivierte Eigenschaft des Kontrollkästchens umgeschaltet.

jQuery: Am besten delegieren Sie die Aktionen an jQuery (jQuery = jQuery).

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

Versuchen Sie dies zu ändern:

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

dazu:

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

Ich bin mir nicht 100% sicher, ob das funktioniert, aber ich erinnere mich an ein ähnliches Problem. Viel Glück!

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

In JQuery glaube ich nicht, dass click () zwei Funktionen zum Umschalten akzeptiert. Sie sollten dafür die Funktion toggle () verwenden: http://docs.jquery.com/Events/toggle

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

Einfachste Lösung

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

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

Eine weitere alternative Lösung zum Umschalten des Kontrollkästchenwerts:

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

});

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