单选按钮更改颜色

Question

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();
}

Answer 1

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.

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 }.Blue { 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>Blue <input type="radio" name="colore" value="Blue" /></label><br/> </p>