jQuery 1.9.1 toggle()-Ersatz gesucht.

[Chronos]

Hi,

ich habe bisher unter jQuery 1.8.3 toggle() genutzt
um sämtliche Checkboxen auf meiner Seite zu de- und aktivieren.
Mit jQuery 1.9.1 gibt es die toggle()-Funktion in der Form nicht mehr, also wollte ich mir so einen "Schalter" selbst schreiben.

Unter 1.8.3:

$(document).ready(function(){
  $('#checkit').toggle(function(){ // Schalter um alle Checkboxen auzuwählen / zu deaktivieren
      $('input:checkbox').attr('checked','checked');
      $('#checkit').text('Alle deaktivieren');
      show();
    },function(){
      $('input:checkbox').removeAttr('checked');
      $('#checkit').text('Alle aktivieren');
      hide();
    });
});

und mein Versuch unter 1.9.1:

$(document).ready(function(){
var state = 0;
  
  $('#checkit').click(function(){
    if(state == 0){
      $('input:checkbox').attr('checked','checked');
      $('#checkit').text('Alle deaktivieren');
      show();
      state = 1;
    }
    else if(state == 1) {
      $('input:checkbox').removeAttr('checked');
      $('#checkit').text('Alle aktivieren');
      hide();
      state = 0;
    }
  });
});

Bei der 1.9.1 Version klappt das ein und dann ausblenden genau ein mal, danach nicht mehr.
Kann jemand daraus lesen, woran das liegen kann?

MfG

 

[omoxen]

keine ahnung, woran das liegt. Vllt überschreibst du state in der document.ready funktion(wenn da noch mehr code kommt)...
Und um das abzukürzen würd ich einfach state = Math.abs(state - 1) schreiben und if(state) anstatt if(state == 0), das kommt nämlich genau aufs gleiche raus :)

 

[Chronos]

Da kommt zwar noch Code innerhalb der ready-Funktion, der hat aber nichts damit zu tun und state wird auch nicht nochmals überschrieben.
Ich habe testweise trotzdem mal alles anderes auskommentiert und noch eine andere Möglichkeit probiert:

$('#checkit').click(function() {
    $('input[type=checkbox]').each(function() {
        $(this).attr('checked',!$(this).attr('checked'));
    });
 });

aber hier hab ich genau das gleiche Problem! Es aktiviert einmal alle und auch einmal werden alle deaktiviert, dann passiert aber nichts mehr.

Auch wenn ich meinen Code nehme und mir in der Console den state ausgeben lasse muss das eigentlich so stimmen:

Irgendwie kann ich das echt nicht nachvollziehen.

 

[omoxen]

aah, du musst wohl die neue funktion "prop" anstatt "attr" benutzen: javascript - .prop() vs .attr() - Stack Overflow

 

[Chronos]

aah, du musst wohl die neue funktion "prop" anstatt "attr" benutzen: javascript - .prop() vs .attr() - Stack Overflow

Witzig. Ja das hab ich vor 5 Sekunden auch gefunden .
Trotzdem komisch, ich meine die Elemente werden ja auch dementsprechend mit checked="checked" ergänzt aber eben nicht "optisch" angehakt.

Der "richtige" Code sieht jetzt so aus:

var state = 0;
  
  $('#checkit').click(function(){
    if(state == 0){
      state = 1;
      $('input:checkbox').prop('checked', true);
      $('#checkit').text('Alle deaktivieren');
    }
    else if(state == 1) {
      state = 0;
      $('input:checkbox').prop('checked', false);
      $('#checkit').text('Alle auswählen');
    }
  });

Noch eine Ergänzung, ich fülle mit jeder aktivierten Checkbox ein Array um das dann per PHP auszuwerten, das hab ich bisher so gemacht:

$('input[type=checkbox][checked]').each(function(){ sItems += $(this).val() + ", "; });

Da aber nun durch die Änderung mit Prop checked nicht mehr direkt geschrieben wird muss man das anders auswerten, z. B. so:

$('input:checkbox').filter(':checked').each(function(){ sItems += $(this).val() + ", "; });

Danke für eure Mühe, ist schon manchmal nervig sowas

 

[Tronjer]

Ich beneide dich um die 1.9.1. Selber muss ich täglich Plugins mit Uralt-Versionen von jQuery erweitern. So etwas wie prop() kenne ich noch gar nicht. :(

 

[omoxen]

wie gesagt, schöner find ichs einfach in zwei zeilen:

$("input:checkbox").prop("checked", state = Math.abs(state - 1));
$('#checkit').text("Alle " + (state ? "auswählen" : "deaktivieren"));

 

[Chronos]

wie gesagt, schöner find ichs einfach in zwei zeilen:

$("input:checkbox").prop("checked", state = Math.abs(state - 1));
$('#checkit').text("Alle " + (state ? "auswählen" : "deaktivieren"));

Ah okay das ist eleganter ja :)
Könntest du das noch grob erklären? abs gibt mir ja immer immer den positiven (absoluten) Wert wieder, soweit klar.
Initieren musst ich state in meinem Fall noch mit 0, ansonsten musste ich zwei mal klicken um alle zu deaktivieren.

Edtit: Habs begriffen , thx