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