Cambiar estilos de raiobuttons: checked y unchecked

wmzt · #1 (**permalink**) 12/11/2008, 04:32

Hola!

Tengo un formulario y estoy intentando cambiar la clase de estilos de los radiobuttons cuando se selecciona uno... pero no lo he logrado

La idea es que funcione como este demo: (copiar y pegar en la barra de direcciones)
lipidity.com/fancy-form/demo/
pero sin tener que usar la librería de mootools...

el código que tengo es el siguiente:

Código:

<html>
<head>
	<script>
      function cambiaClase()
      {
       if(document.formulario.opciones.cheked=="")
       {
          document.formulario.contenedor.className="selected";
       }
       else
       {
          document.formulario.contenedor.className="unselected";
       }
      }
	</script>

	<style>
.selected {
	background-color: red;
}
.unselected {
	background-color: blue;
}
	</style>
</head>

<body>
<form name="formulario"> 
	<fieldset>
		<p class="radios">
			<label class="selected" name="contenedor">
				<input type="radio" name="opciones" checked="checked" />
				1a Opcion
			</label>
		</p>
		<p class="radios">
			<label class="unselected" name="contenedor">
				<input type="radio" name="opciones" />
				2a Opcion
			</label>
		</p>
		<p class="radios">
			<label class="unselected" name="contenedor">
				<input type="radio" name="opciones" />
				3a Opcion
			</label>
		</p>
	</fieldset>
<form>

Si alguien puede lanzarme un cable, se lo agradeceré enormemente

caricatos · #2 (**permalink**) 12/11/2008, 04:39

Hola:

N o veo que uses ningún botón o evento... ¿dónde o cómo quieres hacer el cambio?

Saludos

wmzt · #3 (**permalink**) 12/11/2008, 07:57

Cita:

Iniciado por caricatos

Hola:

N o veo que uses ningún botón o evento... ¿dónde o cómo quieres hacer el cambio?

Saludos

jejeje lo siento, ese no era el código definitivo... este es el que uso, pero no me va

Código:

<html>
<head>
	<script>
      function cambiaClase()
      {
       if(document.formulario.opciones.cheked=="")
       {
          document.formulario.contenedor.className="selected";
       }
       else
       {
          document.formulario.contenedor.className="unselected";
       }
      }
	</script>

	<style>
.selected {
	background-color: red;
}
.unselected {
	background-color: blue;
}
	</style>
</head>

<body>
<form name="formulario"> 
	<fieldset>
		<p class="radios">
			<label class="selected" name="contenedor">
				<input type="radio" name="opciones" checked="checked" onClick="cambiaClase()"; />
				1a Opcion
			</label>
		</p>
		<p class="radios">
			<label class="unselected" name="contenedor">
				<input type="radio" name="opciones" onClick="cambiaClase()"; />
				2a Opcion
			</label>
		</p>
		<p class="radios">
			<label class="unselected" name="contenedor">
				<input type="radio" name="opciones" onClick="cambiaClase()"; />
				3a Opcion
			</label>
		</p>
	</fieldset>
<form>

foreverOdd · #4 (**permalink**) 12/11/2008, 08:09

al igual que los select no se le puede cambiar el estilo a los radio buttons o los checkbox, su apariencia depende del navegador

David · #5 (**permalink**) 12/11/2008, 08:43

Lo que sí se puede hacer es sustituir los select, checks y demás controles por imágenes u otros elementos que se comporten de igual forma (claro, la sustitución hacer por código para que sea accesible).

wmzt · #6 (**permalink**) 12/11/2008, 08:49

gracias a todos por responder ;)

aun me falta un largo camino para pder programar mis propios scripts...

aunque finalmente lo he logrado con ayuda de un script llamado "CRIR: Checkbox & Radio Input Replacement"
espero os sea útil por si lo necesitais

saludos!