Link to home
Start Free TrialLog in
Avatar of kgp43
kgp43Flag for Denmark

asked on

jQuery onClick error

Hi,

I have a problem with label tags removing/adding wrong classes.
It's seems random and I have no idea what is causing it, jQuery is still new to me.

jQuery should add/remove a class to <label> under correct parent div id (sketch_yellow / sketch_green)

See screenshot below.

jQuery:
<script>

	$(document).ready(function() {
		
		$('input[type=radio]').change(function(){
			var activeLabel = $(this).parents('.sketch_yellow');
			$('label.yellow_active', activeLabel).removeClass('yellow_active');
			$(this).parents('label').addClass('yellow_active');
		});
		$('input[type=radio]').change(function(){
			var activeLabel = $(this).parents('.sketch_green');
			$('label.green_active', activeLabel).removeClass('green_active');
			$(this).parents('label').addClass('green_active');
		});		
	});
</script>

Open in new window


HTML:
<div class="sketch_yellow">
	<label for="y1" class="radio_btn yellow_btn radio1 <?php if($conf['connection_port_bot_angle'] == 0) echo 'yellow_active'; ?>">
		<input id="y1" name="connection_port_bot_angle" value="0" type="radio" class="r-input" <?php cps_checked(0, $conf['connection_port_bot_angle']); ?>>
	</label>
	<label for="y2" class="radio_btn yellow_btn radio2 <?php if($conf['connection_port_bot_angle'] == 45) echo 'yellow_active'; ?>">

		<input id="y2" name="connection_port_bot_angle" value="45" type="radio" class="r-input" <?php cps_checked(45, $conf['connection_port_bot_angle']); ?>>
	</label>
	<label for="y3" class="radio_btn yellow_btn radio3 <?php if($conf['connection_port_bot_angle'] == 90) echo 'yellow_active'; ?>">
		<input id="y3" name="connection_port_bot_angle" value="90" type="radio" class="r-input" <?php cps_checked(90, $conf['connection_port_bot_angle']); ?>>
	</label>
</div>

Open in new window


User generated image
Avatar of HugoHiasl
HugoHiasl

You added 2 different onchange handler to the same element.  Is this by intention? The second one overwrites the first one. Why not doing both checks in the same handler?
Avatar of kgp43

ASKER

The onchange need to remove a class if it already exist and add a new one.

Example:

Page is loaded and the current selected one (value from database) is selected.
User click a new radio and the previous one is "unchecked" (class removed) and new one is selected (class added).
Avatar of kgp43

ASKER

Also, the "radio box" to the left works fine, as stand alone.
When I add jQuery for the "radio box" to the right, then it all start to mess up (both left and right)
Avatar of kgp43

ASKER

Any suggestions? This is the HTML for the "radio-box" on the right side of the page:

<div class="sketch_green">
	<label for="g1" class="radio_btn green_btn radio1 <?php if($conf['connection_port_top_angle'] == 0) echo 'green_active'; ?>">
		<input id="g1" name="connection_port_top_angle" value="0" type="radio" class="r-input" <?php cps_checked(0, $conf['connection_port_top_angle']); ?>>
	</label>
	<label for="g2" class="radio_btn green_btn radio2 <?php if($conf['connection_port_top_angle'] == 45) echo 'green_active'; ?>">
		<input id="g2" name="connection_port_top_angle" value="45" type="radio" class="r-input" <?php cps_checked(45, $conf['connection_port_top_angle']); ?>>
	</label>
	<label for="g3" class="radio_btn green_btn radio3 <?php if($conf['connection_port_top_angle'] == 90) echo 'green_active'; ?>">
		<input id="g3" name="connection_port_top_angle" value="90" type="radio" class="r-input" <?php cps_checked(90, $conf['connection_port_top_angle']); ?>>
	</label>
	...................
</div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of kgp43

ASKER

Ahhhh, I see - that make sense.
Works perfectly, thanks :)