The css setting didn't work?

hobby:<input id="x1" type="radio" name="sports" />x1
<input id="x2" type="radio" name="sports" />x2
<input id="x3" type="radio" name="sports" />x3
<input type="button" value="" onclick="ShowChecked()">
<br>
<script> 
function ShowChecked(){
    $("input").css("backgroundColor","");
    $("input:checked").css("backgroundColor","red");
}    
</script>

after selecting a radio, click to show that the background color does not turn red, huh?

Apr.20,2021

<input type="button" value="" onclick="ShowChecked">

there is no problem with the selector. The problem occurs when the background of input [type=radio] cannot be displayed, or the background cannot be set.

you can set up margin to try

function ShowChecked(){
    $("input").css("backgroundColor","");
    $("input:checked").css("margin","100px");
}    

there is no problem with your code. You can take a look at F12 . The added css attribute has been added, and the reason for no effect (bakground turns red) is that, input radio setting background has no effect. If you want to set the effect of the radio box, you should use a combination of input and label tags to set a better-looking radio or multi-select button.

Menu