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 に答える