kgp43
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:
HTML:
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>
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>
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?
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).
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).
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)
When I add jQuery for the "radio box" to the right, then it all start to mess up (both left and right)
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Ahhhh, I see - that make sense.
Works perfectly, thanks :)
Works perfectly, thanks :)