Question

以下示例代码适用于FireFox，但IE导致问题。

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

当我尝试提交variblse时，复选框的值存储为“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>

Answer 1

看起来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);

Answer 2

我为有兴趣的人找到了解决方案。这更像是一种解决方法，因为我无法弄清楚它为什么会发生。

在创建每个输入元素时，而不是在使用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 }));
        });
    });

Answer 3

我发现.map函数对此方案有用。这种用法无需剥离尾随'，'。

$('#ProfSelector input:checkbox:checked').map(function() {
  return this.id;
  // or jquery object 
  // return $(this).val();
}).get().join(',');

IE8中生成的jQuery值的复选框存储为“on”而不是实际值？

3 个答案: