1

发生了一件奇怪的事情，真的不知道如何解决这个问题。谷歌搜索时我也没有找到有用的东西。

我有一个包含以下内容的 html 表单：

<label for="gebied">Gebieden</label>
<div class="button button-selected"><input type="checkbox" name="areas" value="nederland" checked="checked" />Nederland</div>
<div class="button button-selected"><input type="checkbox" name="areas" value="europa" checked="checked" />Europa</div>
<div class="button button-selected"><input type="checkbox" name="areas" value="wereld" checked="checked" />De Wereld</div>

然后使用 javascript (jQuery) 检查哪些已检查，哪些未检查：

var areas = [];
$('input[name=areas]:checked').each(function(){
areas.push($(this).val());
 });

这是createShortUrl();在相关代码中从内部调用的：

$(function() {
    //Handle things when a buttons is clicked
    $("div.button").click(function() {
        //Find the input field for the clicked div
        var input = $(this).find(':input');
        var inputName = $(input).attr('name');
        //Handle checkboxes, which define the gebied
        if ($(input).is(':checkbox')) {
            //Change the classes
            input.prop('checked', !input[0].checked);
            $(this).toggleClass('button-selected');
        }
        //Handle radio
        if ($(input).is(':radio')) {
            $('form').find('input[name=' + inputName + ']').each(function() {
                $(this).parent('div').toggleClass('button-selected');
                $(this).prop('checked', !input[0].checked);
            });
        }
        //Clicking means something chanhes; create a new short url
        createShortUrl();
    });
});

奇怪的是，在 Firefox 中，当我之前检查过其中的一些时，它们仍停留在区域数组中。即使我取消选中其中一些，它们也会留在数组中，反之亦然。但是在 Safari 中调试时，它就像一个魅力！

然后，当我取消选中所有内容时，数组为空。重新检查一些，并在数组中有。

那么，有什么想法，Firefox 发生了什么？看起来 FF 正在缓存，即使经过几次刷新，前一个数组也是如此。尽管我

变量区域 = []

我希望在其中清空并重建它....

它在这里直播，在点击底部的大按钮后触发。

任何想法都更受欢迎！

4

2 回答 2

1

问题在于您的事件处理程序。问题是，您修改元素状态的方式在 Firefox 中不起作用。您应该使用attr()而不是prop()更改checked状态。

工作代码：替换.prop()为.attr().

//Handle things when a buttons is clicked
$("div.button").click(function() {
    console.log("Click");

    //Find the input field for the clicked div
    var input = $(this).find(':input');
    var inputName = $(input).attr('name');

    //Handle checkboxes, which define the gebied
    if ($(input).is(':checkbox')) {
        //Change the classes
        console.log("check");
        input.attr('checked', !input[0].checked);
        $(this).toggleClass('button-selected');
    }

    //Handle radio
    if ($(input).is(':radio')) {
        $('form').find('input[name=' + inputName + ']').each(function() {
            $(this).parent('div').toggleClass('button-selected');
            $(this).attr('checked', !input[0].checked);
        });
    }
    //Clicking means something chanhes; create a new short url
    createShortUrl();
});
于 2013-01-07T11:20:46.053 回答
0

您正在将输入的值（这些是字符串）推送到静态数组中。没有理由在 Firefox 或任何其他浏览器中与 DOM 一起更新此数组。

如果您要将 DOM 元素本身存储在数组中并从中检索值，那将是另一回事。

于 2013-01-07T11:02:59.567 回答