Javascript – Ändern Sie den Stil der ausgewählten Radiooption

Question

Ändern Sie den Stil der ausgewählten Einzeloption, aber nach dem Hinzufügen des Stils ist der geänderte Optionsstil weiterhin vorhanden, dh es werden zwei ausgewählte Stile gleichzeitig angezeigt. Das Folgende ist mein Code.

<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>

你选中的 是input 不是label 注意 $(this).parent().css("background","green").siblings()

Answer 2

代码没测试, 思路就是先移除所有背景色,再给点击的那一个添加背景色, 你这个if判断是不需要的

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