Checkbox not getting checked state before page reload

Question

My app has a table of venues and areas, where each area has many venues. The index page displays all the venues as partials.

The index page also has a form containing a checkbox for each area and a submit button and allows the user to filter the venues shown depending on what area(s) are selected. The checkboxes are using the jQuery-UI button widget to get a better appearance.

The index page also has a .png map image of a town showing all the differant areas and each area is clickable and corresponds with an area checkbox in the filter form. The map.png is the background of an image-map containing a poly shape for each area.

I've managed to link the areas on the map to the area checkboxes using javascript so a user can select either checkboxes in the form or the areas on the map to filter the results.

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

The areas on the map have an areanum value which matches the id of its corresponding checkbox.

However, if the user clicks an area on the map the corresponding checkbox won't look like its been checked until after the form has been submitted and the page reloads.

How can I make it so as soon as an area is selected on the map the corresponding checkbox also appears to have been checked?

If any other code is wanted please ask and I'll post, I didn't want to bog the question down with reams of code as I'm not too sure as what would be important.

Any help on this will be very much appreciated!

Answer 1

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

Aha! When programmatically changing a checkbox state for custom jQuery UI checkboxes you will need to explicitly tell the checkbox to refresh it's display state:

$('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();