Question

My app has a form which uses checkboxes to sort results by type and area. There are 2 fieldsets, one for the types and one for the areas.

The area checkboxes are linked to areas of an imagemap so it too can be used to select multiple areas to sort by.

I have this javascript:

This links the area checkboxes and the areas of the imagemap so they both act as form inputs

    var $area = $('area');
    $area.click(function(){
        var $checkbox = $('#' + $(this).data("areanum"));
        $checkbox.attr('checked', !$checkbox.attr('checked')).button('refresh');
    });
    $('label').click(function () {
        $area.filter('[data-areanum="' + $(this).attr('for') + '"]').trigger('click');
        return true;
    });     

This breaks the type checkboxes (they won’t register as being checked when the form is submitted), unless I change the bit:

        $('label').click(function () {
            $area.filter('[data-areanum="' + $(this).attr('for') + '"]').trigger('click');
            return false;
        });

to

        $('label').click(function () {
            $area.filter('[data-areanum="' + $(this).attr('for') + '"]').trigger('click');
            return true;
        });

(changed the last line to return true)

But this makes the checkboxes difficult to select, they respond to a single click if the tick area is clicked but only respond to a double click if the checkbox label is clicked.

I hope this makes sense, if any clarification is needed I’ll try to word the problem better.

Thanks for any help.

Answer 1

I think you don’t need the label click handler at all because you are just toggling the checkbox checked property by triggering the area click handler which will be taken care by label’s default behavior itself when it’s for attribute is set to the checkbox id.