javascript - Modifier le style de l'option radio sélectionnée

Question

Modifiez le style de l'option unique sélectionnée, mais après avoir ajouté le style, le style de l'option modifiée existe toujours, c'est-à-dire que deux styles sélectionnés apparaissent en même temps. Voici mon code. Comment devez-vous le modifier ?

<p class="choice">
                            <label>
                                <input type="radio" class="a" name="1"><span class="aFont">aaaaa</span>
                            </label>
                            <label>
                                <input type="radio" class="b" name="1"><span class="bFont">bbbbb</span>
                            </label>
                            <label>
                                <input type="radio" class="c" name="1"><span class="cFont">ccccc</span>
                            </label>
                            <label>
                                <input type="radio" class="d" name="1"><span class="dFont">ddddd</span>
                            </label>
                        </p>
<script>
        $(document).ready(function(){
            $(".choice input[type = 'radio']").on("click",function(){
                if ($(".choice input:checked")){
                    $(this).siblings().css("background","red");
                }
            });
        });
</script>

Answer 1

    <p class="choice">
        <label>
            <input type="radio" class="a" name="1"><span class="aFont">aaaaa</span>
        </label>
        <label>
            <input type="radio" class="b" name="1"><span class="bFont">bbbbb</span>
        </label>
        <label>
            <input type="radio" class="c" name="1"><span class="cFont">ccccc</span>
        </label>
        <label>
            <input type="radio" class="d" name="1"><span class="dFont">ddddd</span>
        </label>
    </p>
<script>
        $(document).ready(function(){
            $(".choice input[type = 'radio']").on("click",function(){
                if ($(".choice input:checked")){
                    $(this).parent().css("background" , "green").siblings().css("background","red");
                }
            });
        });
</script>

Celui que vous avez sélectionné est une entrée, pas une étiquette. Notez $(this).parent().css("background","green").siblings()

Answer 2

Le code n'a pas été testé. L'idée est de supprimer d'abord toutes les couleurs d'arrière-plan, puis d'ajouter une couleur d'arrière-plan à celle sur laquelle vous avez cliqué si aucun jugement n'est nécessaire

.

<script>
        $(document).ready(function(){
            $(".choice input[type = 'radio']").on("click",function(){
                   $(".choice input[type = 'radio']").css("background","");
                   $(this).css("background","red");
            });
        });
</script>