javascript - Ubah suai gaya pilihan radio yang dipilih

Question

Ubah suai gaya pilihan tunggal yang dipilih, tetapi selepas menambah gaya, gaya pilihan yang diubah suai masih wujud, iaitu, dua gaya terpilih muncul pada masa yang sama Berikut ialah kod saya.

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

Yang anda pilih ialah input, bukan label Nota $(this).parent().css("background","green").siblings()

.

Answer 2

Kod belum diuji Ideanya adalah untuk mengalih keluar semua warna latar belakang dahulu, dan kemudian menambah warna latar belakang yang anda klik jika pertimbangan anda tidak diperlukan

.

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