Klicken Sie auf Mit jQuery umschalten

70

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.

eozzy
quelle
Hier Tutorial auf Wie JQuery - Plugin zu konvertieren Radiobuttons in Umschaltflächen erstellen und hier können Sie Demo sehen . Hoffentlich kann es Ihnen oder anderen Benutzern helfen
Gopal Joshi

Antworten:

214

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);
 });
karim79
quelle
Ich würde nicht empfehlen, das DOM-Attribut eines Elements auf einen booleschen Wert zu setzen. Vermutlich wird es dabei auf die Saite geworfen '1'.
Alex Barrett
2
@ Alex Barrett - sollte keine Rolle spielen, jQuery fegt solche Details unter den Teppich. Ich glaube , dass es gängige Praxis ist boolean Attribute zu setzen , wie ausgewählt , deaktiviert und aktiviert , um einen Booleschen Wert mit attr (). Darüber hinaus ist ihre interne Darstellung boolesch. Alert ($ foo.attr ('checked')) gibt true oder false zurück, unabhängig davon, ob ein String oder ein Boolescher Wert zum Festlegen verwendet wurde.
Karim79
8
Ich bin auf Fälle gestoßen, in denen Sie das Attribut "markiert" tatsächlich vollständig entfernen müssen, damit das Kontrollkästchen deaktiviert wird. Unter diesen Umständen funktioniert keines davon.
Jeremy Holovacs
@Jeremy - können Sie ein funktionierendes Beispiel liefern? Klingt nach einem bizarren Randfall.
Karim79
1
Warum das Attribut auf so komplexe Weise invertieren, wenn Sie einfach auf jedes Kontrollkästchen klicken können:... $(this).find(':checkbox').click(); ...
vladko13
27

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();
Justin Tanner
quelle
2
Ich mag das, da es auch für Zugladungen von Kontrollkästchen funktioniert. +1
Tino
Sie sollten hinzufügen, da this.trigger('change');sonst das onChange-Ereignis nicht ausgelöst wird.
Frozen_byte
11

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
});
Tim Santeford
quelle
1
Sie können das Klickereignis auch direkt auslösen.
Davenpcj
7

Sie könnten die toggleFunktion verwenden:

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});
Dcharles
quelle
Dies ist veraltet.
Emmanuel Ay
2

Warum nicht in einer Zeile?

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

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.

Ross Mehlman
quelle
1

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

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

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!

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

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

Kai
quelle
0
$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});
Alex Barrett
quelle
0

Einfachste Lösung

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});
Keithics
quelle
Schließen. Es wird beim ersten Klick 'undefiniert' und weist den Wert 'false' zu. Dann wird es beim zweiten Klick definiert und der Wert 'true' zugewiesen. Bei einem dritten Klick wird es weiterhin definiert, sodass ihm weiterhin "true" zugewiesen wird.
Kevin C.
0
<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>
dobs
quelle
0

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

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