2

以下示例代码可在 FireFox 中运行，但 IE 会导致问题。

此代码实质上根据 JSON 数组呈现动态复选框列表。

当我尝试提交变量时，复选框的值存储为“on”。我注意到有一个额外的属性被渲染（仅限 IE），称为 jQuery1288631121994，它存储实际值。似乎 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 中设置为“on”的值字段。我为每个元素创建了一个 val attr 并存储了类别 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 回答