it-swarm.com.de

Klicken Sie, um mit jQuery umzuschalten

Ich habe eine Hover-Funktion verwendet, bei der Sie x bei Mouseover und y und Mouseout ausführen. Ich versuche dasselbe für click, 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 ein div aktiviert und beim erneuten Klicken deaktiviert wird - ein Klick-Schalter.

70
3zzy

Dies geschieht auf einfache Weise, indem der aktuelle Status des Kontrollkästchens bei jedem Klick umgedreht 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 direktes Manipulieren der DOM-Eigenschaft "checked" (d. h. ohne Verwendung von attr() zu fetch dem 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 prop nicht attr gesetzt werden:

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

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();
27
Justin Tanner

Warnung: Verwenden Sie attr () oder prop (), um den Status eines Kontrollkästchens zu ändern nicht Feuern Sie Ereignis ändern = In den meisten Browsern, mit denen ich getestet habe. Der aktivierte Status ändert sich, es sprudelt jedoch kein Ereignis. Sie müssen das Änderungsereignis manuell auslösen, nachdem Sie das aktivierte Attribut festgelegt haben. Ich hatte einige andere Event-Handler, die den Status von Kontrollkästchen überwachten und mit direkten Klicks von Benutzern problemlos funktionierten. Wenn Sie den aktivierten Status jedoch programmgesteuert festlegen, wird das Änderungsereignis nicht konsistent ausgelöst.

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
});
11
Tim Santeford

Sie können die Funktion toggle verwenden:

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

Warum nicht in einer Zeile?

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

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

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

Klicken auf das HTML-Objekt (in diesem Fall ein <span>) schaltet die aktivierte Eigenschaft des Kontrollkästchens um.

1
Ross Mehlman

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

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});
1
miosser
<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>
0
dobs
$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});
0
Alex Barrett

versuchen Sie dies zu ändern:

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

dazu:

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

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

0
inkedmn

Einfachste Lösung

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

In JQuery glaube ich nicht, dass click () zwei Funktionen zum Umschalten akzeptiert. Verwenden Sie dazu die Funktion toggle (): http://docs.jquery.com/Events/toggle

0
Kai

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

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