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.