javascript - 页面重新加载之前复选框未获得选中状态

Question

我的应用程序有一个 field 和区域表，每个区域都有许多 field 。索引页面将所有 field 显示为部分。

索引页面还有一个表单，其中包含每个区域的复选框和一个提交按钮，并允许用户根据选择的区域过滤显示的 field 。这些复选框使用 jQuery-UI 按钮小部件来获得更好的外观。

索引页还有有一个城镇的.png map 图像，显示所有不同的区域，每个区域都是可点击的，并且与过滤器表单中的区域复选框相对应。 map.png 是图像 map 的背景，其中包含每个区域的多边形形状。

我已成功使用 JavaScript 将 map 上的区域链接到区域复选框，以便用户可以选择表单中的复选框或 map 上的区域来过滤结果。

$(function() {
  $('area').click(function(){
    var name = $(this).data("areanum");
    var $checkbox = $('#' + name);
    $checkbox.attr('checked', !$checkbox.attr('checked'));
  });       
});

map 上的区域有一个与相应复选框的 ID 相匹配的areanum 值。

但是，如果用户单击 map 上的某个区域，则在提交表单并重新加载页面之前，相应的复选框看起来不会被选中。

如何才能在 map 上选择某个区域后，相应的复选框也显示为已选中？

如果需要任何其他代码，请询问，我会发布，我不想用大量代码使问题陷入困境，因为我不太确定什么是重要的。

对此的任何帮助将非常感激!

Answer 1

... The checkboxes are using the jQuery-UI button widget to get a better appearance. ...

啊哈!当以编程方式更改自定义 jQuery UI 复选框的复选框状态时，您需要显式告诉该复选框刷新其显示状态:

$('area').click(function(){
    var name = $(this).data("areanum");
    var $checkbox = $('#' + name);
    $checkbox.attr('checked', !$checkbox.attr('checked'));
    $checkbox.button("refresh");
});