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 div
aktiviert und beim erneuten Klicken deaktiviert wird - ein Klick-Schalter.
Antworten:
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
prop
not gesetzt werdenattr
:$(".offer").on("click", function () { var $checkbox = $(this).find(':checkbox'); $checkbox.prop('checked', !$checkbox[0].checked); });
quelle
'1'
.... $(this).find(':checkbox').click(); ...
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();
quelle
this.trigger('change');
sonst das onChange-Ereignis nicht ausgelöst wird.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 });
quelle
Sie könnten die
toggle
Funktion verwenden:$('.offer').toggle(function() { $(this).find(':checkbox').attr('checked', true); }, function() { $(this).find(':checkbox').attr('checked', false); });
quelle
Warum nicht in einer Zeile?
$('.offer').click(function(){ $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked')); });
quelle
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'));
Durch Klicken auf das HTML-Objekt (in diesem Fall a
<span>
) wird die aktivierte Eigenschaft des Kontrollkästchens umgeschaltet.quelle
jQuery: Am besten delegieren Sie die Aktionen an jQuery (jQuery = jQuery).
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) { return !val; });
quelle
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!
quelle
$('.offer').click(function(){ if ($(this).find(':checkbox').is(':checked')) { $(this).find(':checkbox').attr('checked', false); }else{ $(this).find(':checkbox').attr('checked', true); } });
quelle
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
quelle
$('.offer').click(function() { $(':checkbox', this).each(function() { this.checked = !this.checked; }); });
quelle
Einfachste Lösung
$('.offer').click(function(){ var cc = $(this).attr('checked') == undefined ? false : true; $(this).find(':checkbox').attr('checked',cc); });
quelle
<label> <input type="checkbox" onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));" /> Check all </label>
quelle
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); });
quelle
$('controlCheckBox').click(function(){ var temp = $(this).prop('checked'); $('controlledCheckBoxes').prop('checked', temp); });
quelle