Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

324
Views
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();
}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

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>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!