javascript - Modify the style of the selected radio option
伊谢尔伦
伊谢尔伦 2017-05-19 10:37:10
0
2
672

Modify the style of the selected single option, but after adding the style, the modified option style still exists, that is, two selected styles appear at the same time. The following is my code. How should you modify it?

<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>
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

reply all(2)
仅有的幸福
    <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>

The one you selected is input, not label. Note $(this).parent().css("background","green").siblings()

某草草

The code has not been tested. The idea is to remove all background colors first, and then add a background color to the clicked one. Your if judgment is not needed

<script>
        $(document).ready(function(){
            $(".choice input[type = 'radio']").on("click",function(){
                   $(".choice input[type = 'radio']").css("background","");
                   $(this).css("background","red");
            });
        });
</script>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!