2

次のサンプル コードは FireFox で動作しますが、IE では問題が発生します。

このコードは基本的に、JSON 配列に従って動的チェックボックスのリストをレンダリングします。

変数を送信しようとすると、チェックボックスの値が「オン」として保存されます。実際の値を格納する jQuery1288631121994 と呼ばれるレンダリングされる (IE のみ) 追加の属性があることに気付きました。jquery がチェックボックスの状態を管理しようとしているようですが、保存されている値にアクセスできないようです。

これが私のテスト例です：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">


        var state = {
            Professions: [1]
        };

        $(document).ready(function () {



            var data = [{ "ID": 1, "Name": "Football" }, { "ID": 2, "Name": "Cricket" }, { "ID": 3, "Name": "Hockey"}];

            $.each(data, function () {

                var catid = this['ID'];
                var catname = this['Name'];

                var selected = $.inArray(catid, state.Professions) != -1 ? true : false;

                $("<li></li>")
                    .append(
                        $("<input></input>").attr({
                            id: 'category' + catid
                            , name: 'categories'
                            , value: catid
                            , type: 'checkbox'
                            , checked: selected
                        })
                        .click(function (event) {
                            //alert($(this)[0].value);

                        })
                    )
                    .append(
                            $(document.createElement('label')).attr({
                                'for': 'category-' + catid
                            })
                            .text(catname)
                    )
                    .append(
                        $("<div></div>").addClass("clear")
                    )
                    .appendTo("#ProfSelector ul");

            });

                        $("#btnTest").click(function () {
                alert($("#ProfSelector input:checkbox:checked").val());
            });

        });
    </script>
</head>
<body>
    <div id="ProfSelector">
        <ul>
        </ul>
    </div>
    <a href="#" id="btnTest">Test</a>
</body>
</html>
4

3 に答える 3

3

IEは、チェックボックス属性の設定方法を好まないようです。それが次のIEに変更された場合は満足です：http：//jsfiddle.net/tS3cs/

$("<li></li>")
.append(
    '<input id="category'+catid+'" value="'+catid+'" type="checkbox"></input>'
)
.append(
    $(document.createElement('label')).attr({
        'for': 'category-' + catid
    })
    .text(catname)
)
.append(
    $("<div></div>").addClass("clear")
)
.appendTo("#ProfSelector ul");

$('#category'+catid).attr('checked',selected);
于 2012-10-05T13:21:03.980 に答える
0

このシナリオには.map関数が役立つと思います。この使用法では、末尾の「,」を取り除く必要はありません。

$('#ProfSelector input:checkbox:checked').map(function() {
  return this.id;
  // or jquery object 
  // return $(this).val();
}).get().join(',');
于 2010-11-01T19:16:14.330 に答える
0

興味のある人のための解決策を見つけました。なぜそれが起こっているのか理解できなかったので、それは回避策です。

jquery 1.4 を使用しているときに、IE で「オン」に設定されたばかりの値フィールドに入力する代わりに、各入力要素を作成する場合。要素ごとに val 属性を作成し、カテゴリ ID を保存します。次に、送信時にこのコードを呼び出すだけで、結果を取得できます。

$(document).ready(function() {
        $("form").submit(function(){

            var str = "";
                $("#ProfSelector input:checkbox:checked").each(function () {
                    str += $(this).attr("val") + ",";
                });

            $("form").append( $("<input></input>").attr({ "type":"text", "name":"selectedCategories", "value":str }));
        });
    });
于 2010-11-01T19:00:10.553 に答える