jQuery zaškrtněte/zrušte zaškrtnutí přepínače onclick

Mám tento kód pro zaškrtnutí/zrušení zaškrtnutí přepínače onclick.

Vím, že to není dobré pro uživatelské rozhraní, ale potřebuji to.

$('#radioinstant').click(function() {     
  var checked = $(this).attr('checked', true);
  if(checked){ 
    $(this).attr('checked', false);
  }
  else{ 
    $(this).attr('checked', true);
  }
});

Výše uvedená funkce nefunguje.

Pokud kliknu na tlačítko, nic se nezmění. Zůstává zaškrtnuté. Proč? kde je chyba? Nejsem odborník na jQuery. Používám jQuery 1.3.2

Aby bylo jasno #radioinstant je ID přepínače.

Odpověď

Pokud vše, co chcete udělat, je mít zaškrtávací políčko, které zaškrtne, nebojte se, že to uděláte s JQuery. To je výchozí funkce zaškrtávacího políčka po kliknutí. Pokud však chcete dělat další věci, můžete je přidat pomocí JQuery. Před jQuery 1.9 můžete použít $(this).attr('checked'); získat hodnotu místo $(this).attr('checked', true); , protože druhý nastaví hodnotu.

Zde je ukázka houslí, která ukazuje výchozí funkci zaškrtávacího políčka vs. to, co děláte s JQuery.

Poznámka:Po JQuery 1.6 , měli byste použít $(this).prop; místo $(this).attr na všech třech místech (děkujeme @Whatevo za upozornění a další podrobnosti naleznete zde).

AKTUALIZACE:

Omlouvám se, vynechal jsem požadavek, že to musí být přepínač. Možná budete chtít zvážit zaškrtávací políčko, ale zde je aktualizovaný kód pro verzi rádiového vstupu. Funguje to nastavením previousValue jako atribut na zaškrtávacím políčku, protože si nemyslím, že prop je podporován v 1.3.2. Můžete to udělat také v proměnné s rozsahem, protože někteří lidé nemají rádi nastavování náhodných atributů na pole. Zde je nový příklad.

AKTUALIZACE 2:

Jak zdůraznil Josh, předchozí řešení fungovalo pouze s jedním přepínačem. Zde je funkce, která umožňuje zrušit výběr skupiny rádií podle jejich názvu a houslí:

var makeRadiosDeselectableByName = function(name){
    $('input[name=' + name + ']').click(function() {
        if($(this).attr('previousValue') == 'true'){
            $(this).attr('checked', false)
        } else {
            $('input[name=' + name + ']').attr('previousValue', false);
        }

        $(this).attr('previousValue', $(this).attr('checked'));
    });
};