jQuery adding/removing attribute and class

Question

I am working on a interactive search map, which uses image maps and rollover sprites and input selectboxes!

You can see my working example here http://jsfiddle.net/mediacake/FxS6j/

The problem I've got when you try the above link is I am also using jQuery jqtransform to style the form elements.. which adds a extra bit of difficulty... well for me! To know how to check and uncheck a select box and its new styles element made by jqtransform!

I've almost got it, but there are a few bugs which I am having a hard time fixing!

Hope someone has an idea how to get right?

Answer 1

Ok after many edits I think we finally go to a solution here. jsFiddle

$(function() {
$('form').jqTransform({
    imgPath: 'img/'
});

//Better to cache these selectors if we are using them more than once
var jqCheckbox = $('.jqTransformCheckbox');
var maps = $('#map-container AREA');

//Unbind the default behaviour set by jqTransform because it was causing double events
jqCheckbox.unbind('click');

//Rebind it with our modified behaviour
jqCheckbox.click(function(evt) {
    var jqTrans = $(this).toggleClass('jqTransformChecked');
    //It would be faster to use an id selectors #id instead of a class selectors .id here 
    var checkbox = jqTrans.next('input[type=checkbox]');
    $('.' + checkbox.prop('id') + '-map').toggleClass('selected'); // img select
    checkbox.prop('checked', !checkbox.prop('checked'));
});

maps.click(function(evt) {
    evt.preventDefault();

    var id = $(this).prop('id');
    $('.' + id + '-map').toggleClass('selected'); // img select
    $('.' + id + '-link').toggleClass('jqTransformChecked'); // a. tickbox
    //Limit to checkboxes because map share same id
    var checkbox = $('input[type=checkbox][id=' + id + ']');
    checkbox.prop('checked', !checkbox.prop('checked'));
});

maps.hover(function(evt) {
    $('.' + $(this).prop('id') + '-map-hover').toggleClass('selected'); // img hover
    //Uncomment if you want tickbox selected
    //$('.' + $(this).prop('id') + '-link').toggleClass('jqTransformHover') // checkbox
});

//Replace with .srow
//Better to use id selector here i.e. div id=srow
$('.form-row label').hover(function(evt) {
    var id = $(this).find('input').prop('id');
    $('.' + id + '-map-hover').toggleClass('selected'); // img hover
    //Uncomment if you want tickbox selected
    // $('.' + id + '-link').toggleClass('jqTransformHover') // checkbox
});

$('.form-row input[type=checkbox]').change(function(evt) {
    var map = $('.' + $(this).attr('id') + '-map'); // img select
    map.toggleClass('selected');
});

});