Estilo de botones de radio con CSS y uso de imagen - jquery, html, css, imagen, botón de radio

¿Existe una forma fácil y sencilla de diseñar botones de radio solo con CSS, por lo que hago clic en una imagen en lugar de una viñeta? Como pulgares arriba / pulgar abajo, por ejemplo.

Tengo dos botones de radio y necesito registrarme.en cuál se hace clic. Los botones de radio se hacen visibles cuando presiona un botón, y cuando hace clic en un botón de radio, un texto reemplaza a los botones de radio.

BOTÓN> BOTONES DE RADIO> TEXTO

Esto es lo lejos que he llegado:

HTML

<div id="txtradiocall_lille" style="display:none;">
<input id="Radio1" type="radio" value="yes" class="input_hidden" /><label for="yes"><img src="/images/http://www.xxxx.dk/images/images/thumb_up_green.png" alt="Yes" /></label>
Yes
<input id="Radio1" type="radio" value="no" class="input_hidden" /><label for="no"><img src="/images/http://www.xxxx.dk/images/images/thumb_down.png" alt="No" /></label>
No
</div>

CSS

.txtradiocall_lille input[type="radio"]
{
display:inline;
}

.input_hidden {
position: absolute;
left: -9999px;
}

.selected {
background-color: #ccc;
}

#txtradiocall_lille label {
display: inline-block;
cursor: pointer;
}

#txtradiocall_lille label:hover {
background-color: #efefef;
}

#txtradiocall_lille label img {
padding: 3px;

}

controlador de clics de radio

 $("input[type="radio"]").change(function () {
var selection = $(this).val();
getcallaskok(selection, talok);
});

En este momento, estoy obteniendo las imágenes en lugar de las balas de radio, pero parece que los clics no se están registrando, porque no obtengo el texto que necesito después del clic.

¿Puede alguien ayudarme por favor?

Respuestas

3 para la respuesta № 1

La mejor práctica es simplemente usar el elemento de etiqueta de esta manera:

<label id="labelone" for="myradiobutton"></label>

<input type="radio" value="xxx" id="myradiobutton">

Luego usas css para diseñar la etiqueta. En su caso, probablemente añada su imagen como fondo.

Entonces solo escondes el botón de radio actualMoviéndolo fuera de la pantalla usando posicionamiento absoluto. nótese bien No oculte el botón de radio usando la pantalla: ninguno o visibilidad: oculto ya que esto es malo para la accesibilidad.

Por lo tanto, el usuario hará clic en la etiqueta y se seleccionará el botón de radio que ahora está fuera de la pantalla.

---

0 para la respuesta № 2

Creo que ocultar el botón de radio y usar etiquetas comoque estas haciendo es suficiente Pero puede necesitar alguna corrección. El atributo "for" en la etiqueta apunta a id, no al valor que está haciendo ahora. Y para agrupar el botón de opción use el nombre, no la identificación como lo está haciendo ahora.

---