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?

What exactly are you having trouble with? Are you trying to hide the default checkboxes and only show the styled ones? — No Results Found
– No Results Found, Commented May 8, 2011 at 11:56
The original elements should be being hidden by .jqTransformHidden but that is being overridden to {display:inline;} Well lets see what Daniel gets back with. — Nicky Waites
– Nicky Waites, Commented May 8, 2011 at 12:14
did u study latest jQuery(v1.6) methods jQuery.prop and jQuery.removeProp . these may helps you.. — xkeshav
– xkeshav, Commented May 8, 2011 at 13:30
hi Am showing checkboxes just for testing to make sure they are being checked if an area of the map is being selected. — Daniel
– Daniel, Commented May 8, 2011 at 14:05
Am still a beginner with Jquery! there are a couple of things missing here... 1. hover over labels shows relative area on map. 2. click map area make select box ticked and checkbox ticked. 3. click select map area again deselect both tickbox and checkbox and 2,3 would be the same if you click on the tickbox map, checkbox select. how this helps ?? — Daniel
– Daniel, Commented May 8, 2011 at 14:13

Nicky Waites · Accepted Answer · 2011-05-10 20:27:17Z

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');
});

});

edited May 10, 2011 at 20:27

answered May 8, 2011 at 12:25

Nicky Waites

2,42818 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

28 Comments

Daniel Over a year ago

don't worry about how it looks! the reason iv got the selectboxs showing is that i can see that that they are being selected !! am not stuck with styling just the actions..

Daniel Over a year ago

if you click on an area of the map it highlights that area and also ticks the box but i need it to make the selectbox selected aswell! thats why iv got them showing...in finial version il hide them again. Now if you click the tickbox the map area is selected and also the selectbox !

Daniel Over a year ago

thanks but you still got the same problem iv got ! if you click on the tickbox nothing happens ! when you click the tickbox it should make the checkbox selected and also the map selected just like it does if you click on the map

Nicky Waites Over a year ago

What web browser are you using?

Nicky Waites Over a year ago

I think I see what the problem is now. You click the tick box and it highlights the map but doesn't select the box until the second click right?

|

Collectives™ on Stack Overflow

jQuery adding/removing attribute and class

1 Answer 1

28 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

28 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related