Botones de radio HTML que permiten selecciones múltiples

En mi formulario HTML, tengo lo siguiente como un conjunto de botones de radio, dependiendo de qué botón de selección seleccione depende de qué se revele el siguiente formulario

, todo esto funciona. El problema es que, por algún motivo, funcionan como una checkbox y no como un botón de opción. De modo que puede seleccionar todas las opciones y no solo una a la vez.

¿Alguien puede ver dónde está yendo mal en el siguiente código?

  
Please select one of the following


Todos necesitan tener el mismo atributo de name .

Los botones de opción están agrupados por el atributo de name . Aquí hay un ejemplo:

 
Please select one of the following


Lo hice de esta manera en el pasado, JsFiddle :

CSS:

 .radio-option { cursor: pointer; height: 23px; width: 23px; background: url(../images/checkbox2.png) no-repeat 0px 0px; } .radio-option.click { background: url(../images/checkbox1.png) no-repeat 0px 0px; } 

HTML:

 
  • jQuery:

      

    El nombre de las entradas debe ser el mismo para pertenecer al mismo grupo. Luego, los otros se anularán automáticamente cuando se haga clic en uno.

    Prueba esta forma de formación, es bastante elegante …

    Echa un vistazo a esta jsfiddle

    Botón-Radio

     The idea is to choose a the radio as a button instead of the normal circle image. 

    Para que los botones de opción funcionen correctamente, debe agruparlos por su nombre. (Ej. Nombre = “tipo”)

      
    Please select one of the following


    Devolverá el valor del botón de opción seleccionado (por ejemplo, track | event | message)

    Todos los botones de opción deben tener el mismo atributo de nombre agregado.