En algunes ocasions volem crear els clàssics radio buttons personalitzats, amb imatges o divs, per exemple, per crear un formulari de selecció de sexes, entre home i dona, que segons el que seleccionem, posteriorment podrem fer aparèixer unes variables o unes altres o fer uns moviments o uns altres.
Només necessitarem tenir la imatge o el div del propi botó de selecció (amb classe pròpia – en aquest exemple seran .home i .dona) i una classe .true, la qual podria no tenir cap propietat CSS. Per tant, un exemple seria:
$('.home').click(function(){
//Desactiva els dos botons. Serveix per si canviem de botó selector
$(this).removeClass("true");
$('.dona').removeClass("true");
//Home queda activat
$(this).addClass("true");
});
$('.dona').click(function(){
//Desactiva els dos botons. Serveix per si canviem de botó selector
$(this).removeClass("true");
$('.home').removeClass("true");
//Dona queda activat
$(this).addClass("true");
});
Un cop tinguem els botons selectors fets, segurament voldrem realitzar alguna funció amb el propi jQuery. Si és així, dins la pròpia funció podrem dir:
if (($('.home').hasClass('true') || $('.dona').hasClass('true'))
//Fés alguna cosa
La prova la podeu comprovar a la Felicitació de Nadal que vam fer en Gerard H. Serra i jo, en què el primer que s’ús demana és que seleccioneu si sou home o dona:
http://www.rumescu.cat/nadal/1/