2

我有一个页面，它使用一些 jquery ui 来设置一些单选按钮的样式。当用户选择一个时，jquery 将识别出哪个被选中，然后更改下方相应 div 的背景颜色（最终，他们实际上会调用 .load 来用动态页面上的内容填充 div网站，但现在，只需为 div 着色即可）。

它在 Firefox 中运行良好，但在 Internet Explorer（或某些人称之为 Internet Exploder）中，它抱怨“radio1”未定义。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Button - Checkboxes</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>

        $(document).ready(function() {
                $(function() {
                    $( "#radio" ).button();
                    $( "#format" ).buttonset();
                });

            $('input:radio').change(function(){
                if($(radio1).is(':checked')){
                    $("#first").css("background-color","yellow");
                    $("#second").css("background-color","white");
                    $("#third").css("background-color","white");
                }else if($(radio2).is(':checked')){
                    $("#first").css("background-color","white");
                    $("#second").css("background-color","red");
                    $("#third").css("background-color","white");
                }else if($(radio3).is(':checked')){
                    $("#first").css("background-color","white");
                    $("#second").css("background-color","white");
                    $("#third").css("background-color","blue");
                } else {
                    $("#first").css("background-color","white");
                    $("#second").css("background-color","white");
                    $("#third").css("background-color","white");
                }
            });
        });

    </script>
    <style>
    #format { margin-top: 2em; }
    </style>
</head>
<body>


<form>
    <div id="format">
        <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" /><label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
    </div>
</form>

    <!-- The following divs will end up being populated via an ajax call based on checkbox selections -->
    <!-- Ultimately, checking a given checkbox should toggle the corresponding div -->
    <div id="first">
        First Div
    </div>
    <div id="second">
        Second Div
    </div>
    <div id="third">
        Third Div
    </div>

</body>
</html>
4

1 回答 1

3

选择器应该使用 id 选择器来访问单选按钮。我不知道这在 FF 中是如何工作的。

        $('input:radio').change(function(){
            if($("#radio1").is(':checked')){
                $("#first").css("background-color","yellow");
                $("#second").css("background-color","white");
                $("#third").css("background-color","white");
            }else if($("#radio2").is(':checked')){
                $("#first").css("background-color","white");
                $("#second").css("background-color","red");
                $("#third").css("background-color","white");
            }else if($("#radio3").is(':checked')){
                $("#first").css("background-color","white");
                $("#second").css("background-color","white");
                $("#third").css("background-color","blue");
            } else {
                $("#first").css("background-color","white");
                $("#second").css("background-color","white");
                $("#third").css("background-color","white");
            }
        });
于 2013-08-12T23:49:03.813 回答