Флажок не получает проверенное состояние перед перезагрузкой страницы

Question

Мое приложение имеет таблицу мест и областей, где каждая область имеет много мест.Страница указателя отображает все места проведения как частичные.

Страница указателя также имеет форму, содержащую флажок для каждой области и кнопку отправки, и позволяет пользователю фильтровать показанные места в зависимости от того, какие областивыбран.Флажки используют виджет кнопки jQuery-UI для улучшения внешнего вида.

Страница индекса также имеет изображение карты в формате .png города, показывающего все различные области, и каждая областькликабельна и соответствует флажку области в форме фильтра.Map.png - это фон графической карты, содержащей форму поли для каждой области.

Мне удалось связать области на карте с флажками областей с помощью JavaScript, чтобы пользователь мог выбрать любой из них.в форме или областях на карте, чтобы отфильтровать результаты.

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

Области на карте имеют значение areanum, соответствующее идентификатору соответствующего флажка.

Однако, если пользователь щелкает область на картесоответствующий флажок не будет выглядеть как проверенный до тех пор, пока форма не будет отправлена ​​и страница не перезагрузится.

Как я могу сделать так, чтобы, как только область была выбрана на карте, соответствующий флажок также, по-видимому, был отмечен?

Если требуется какой-либо другой код, пожалуйста, спросите, и япост, я не хотел связывать вопрос с набросками кода, так как я не слишком уверен, что было бы важно.

Любая помощь по этому вопросу будет очень признательна!

Answer 1

... Флажки используют виджет кнопки jQuery-UI для улучшения внешнего вида....

Ага!При программном изменении состояния флажка для пользовательских флажков пользовательского интерфейса jQuery вам необходимо явно указать флажку обновить его состояние отображения:

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

Answer 2

Попробуйте это:

$("input[type=checkbox]").prop('checked', true).uniform();