plugin - ¿Cómo se hace un botón de radio HTML en negrita al seleccionar?

plantillas contact form 7

Question

En HTML, tengo las siguientes opciones de botón de radio

o Elección 1
o Elección 2
o Elección 3

Lo que me gustaría hacer es cuando alguien SELECCIONE un botón de radio desde arriba, que el texto correspondiente a ese botón de selección se ponga en negrita.

Entonces, por ejemplo, si la persona selecciona "Opción 2", la selección del botón de radio ahora se vería así:

o Elección 1
o Elección 2
o Elección 3

¿Cómo hago esto? Supongo que se debe usar JavaScript o CSS.

Gracias por adelantado

ACTUALIZACIÓN : ¿Cómo implementaría la solución "nickf" sin usar jQuery?

Answer 1

Aquí hay un ejemplo :

<script>
  function makeBold()
  {
    var radios = document.getElementsByName("sex");
    for (var index = 0; index < radios.length; index++)
    {
      if (radios[index].checked)
      {
        document.getElementById("span_" + radios[index].value).style.fontWeight=''bold'';
      }
      else
      {
        document.getElementById("span_" + radios[index].value).style.fontWeight=''normal'';
      }
    }
  }
</script>

<input type="radio" name="sex" value="male" onclick="makeBold();"> 
<span id="span_male">Male</span>

<br>
<input type="radio" name="sex" value="female" onclick="makeBold()"> 
<span id="span_female">Female</span>

EDITAR: Debe definir sus tramos de texto con ids como ese: span_

Answer 2

Divertido que sus botones tengan etiquetas a su alrededor para incluir el texto, lo agregaría a las etiquetas.

<label onchange="this.parent.children.fontWeight=''normal'';this.fontWeight=''bold'';">

Aunque idealmente no pondría este código en línea, sino que lo conectaré desde algún lugar en la cabeza después de que la página se haya cargado.

Answer 3

Haría algo como esto:

<label><input type="radio" name="myRadio" value="1" /> One</label>
<label><input type="radio" name="myRadio" value="2" /> Two</label>
<label><input type="radio" name="myRadio" value="3" /> Three</label>

Con un controlador onchange en cada elemento para cambiar la clase CSS de la etiqueta principal. En jQuery se vería así:

$('':radio'').change(function() {           // get all the radio buttons and
                                          // add an onchange handler
    var $label = $(this).parent(''label''); // get a reference to the parent label
    if (this.checked) {                   // if the radio is on...
        $label.addClass(''selected'');      // add the CSS class "selected" to the label
    } else {                              // otherwise...
        $label.removeClass(''selected'');   // take the class away.
    }
});

Solo recuerda anular el estilo predeterminado para las etiquetas (que está en negrita):

label {
    font-weight: normal;
}
label.selected {
    font-weight: bold;
}

Answer 4

Puede hacer esto simplemente con CSS, pero debe ajustar el texto de cada entrada en un lapso u otra etiqueta:

<input type="radio" name="group1" value="Milk"><span>Milk</span><br>

Entonces solo usa el selector de hermanos:

input[type="radio"]:checked+span { font-weight: bold; }

Answer 5

Puedes intentar hacer todo con CSS.

Intenté esto y funciona ¹ :

<input type="radio" name="choice" value="1" checked /><span>First choice</span>
<input type="radio" name="choice" value="2" /><span>Second choice</span>

input[type="radio"]:checked + span
{
    font-weight: bold;
}

Explicación: Esto captura todos los tramos después de una entrada de radio (tipo = "radio") y está marcada.

¹ Probé con Firefox 3 e IE7 y solo funcionó con Firefox. ( referencia de compatibilidad )

Answer 6

Utilice el evento OnChange de su select para cambiar el estilo css del elemento elegido a negrita.

Answer 7

<input type=button onClick="this.style.fontWeight=bold">

Esto podría funcionar, no lo hice yo mismo. Por supuesto, hay soluciones mucho mejores.

Si tenía un marco de JavaScript (como jQuery ) insertado en su código, probablemente tenga muchas funciones disponibles para hacer lo mismo. Selectores, estilistas, manipuladores de CSS y muchos más.

Prefiero sugerir crear una clase de CSS como esta:

.felkover
{
    font-weight: bold;
}

Luego simplemente agregue o elimine esta definición en el atributo de clase de cualquier botón dado.