• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

242
Vistas
radio button change text color

I am new at javascript,and i was trying and trying with this but something is wrong,i wanna make the checked radio button red, black, green and blue but I don't know how to use JavaScript

<table>
  <B id="grandezza1">Colore Testo :</B>
</table>
<p style="color:blue" id="colore">
  <br> Nero &nbsp
  <INPUT type="radio" name="colore" value="Nero" onclick="cambiaColore()" checked>
  <BR> Rosso
  <INPUT type="radio" name="colore" value="Rosso" onclick="cambiaColore()">
  <BR> Verde
  <INPUT type="radio" name="colore" value="Verde" onclick="cambiaColore()">
  <BR> Blue &nbsp
  <INPUT type="radio" name="colore" value="Blue" onclick="cambiaColore()">
  <BR>
</P>

function cambiaColore(){
    document.getElementById("area").style.color = $('input[name="radioC"]:checked').val();
}
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You cannot change the colour of a radio button. You can change the colour of the label

In your code, you are mixing DOM (document....) with jQuery ($(...)) that is not a great idea. You were also missing the jQuery library.

Also your name was colore and not radioC

Here I delegate the click from the container

I also fixed your invalid HTML.

const cambiaColore = () => {
  document.querySelectorAll("#colore input[type=radio]").forEach(rad => rad.closest("label").classList.toggle(rad.value, rad.checked))
}
document.getElementById("colore").addEventListener("click", cambiaColore);
cambiaColore(); // initialise
.Nero {
  background-color: black;
  color: white
}

.Rosso {
  background-color: red;
  color: yellow
}

.Verde {
  background-color: green;
  color: yellow
}

.Blu {
  background-color: blue;
  color: yellow
}
<b id="grandezza1">Colore Testo :</b>

<p style="color:blue" id="colore">
  <label>Nero <input type="radio" name="colore" value="Nero" checked /></label><br/>
  <label>Rosso <input type="radio" name="colore" value="Rosso" /></label><br/>
  <label>Verde <input type="radio" name="colore" value="Verde" /></label><br/>
  <label>Blu <input type="radio" name="colore" value="Blu" /></label><br/>
</p>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda