jQuery (or CSS), change color of all labels when radio is checked

Hi,

I got a table with a radio input in first cell and matching labels in the rest.
How do I make it so all label background-colors are checked when input-radio is checked?

<tr>

	<td><label for="mount_tube_<?php echo $mount_fetch['id']; ?>"><input id="mount_tube_<?php echo $mount_fetch['id']; ?>" name="mount_tube_id" value="<?php echo $mount_fetch['id']; ?>" type="radio"></label></td>

	<td><label for="mount_tube_<?php echo $mount_fetch['id']; ?>"><?php echo $mount_fetch['id']; ?></label></td>
	<td><label for="mount_tube_<?php echo $mount_fetch['id']; ?>"><?php echo $mount_fetch['oP']; ?></label></td>

	<td><label for="mount_tube_<?php echo $mount_fetch['id']; ?>"><?php echo $mount_fetch['Z']; ?></label></td>

	<td><label for="mount_tube_<?php echo $mount_fetch['id']; ?>"><?php echo $mount_fetch['S']; ?></label></td>

	<td><label for="mount_tube_<?php echo $mount_fetch['id']; ?>"><?php echo $mount_fetch['oD']; ?></label></td>

	<td><label for="mount_tube_<?php echo $mount_fetch['id']; ?>"><?php echo $mount_fetch['S1']; ?></label></td>

	<td><label for="mount_tube_<?php echo $mount_fetch['id']; ?>"><?php echo $mount_fetch['L']; ?></label></td>

	<td><label for="mount_tube_<?php echo $mount_fetch['id']; ?>"><?php echo $mount_fetch['FC']; ?></label></td>

	<td><label for="mount_tube_<?php echo $mount_fetch['id']; ?>"><?php echo $mount_fetch['weight']; ?></label></td>
</tr>

Open in new window


/***** TABLE *****/
table.overview_table {
	position: relative;
	margin-top: 20px;
	width: 100%;
	clear: both;
}
.overview_table th {
	background-color: #E5020D;
	padding: 5px 10px;
	color: #fff;
	text-align: center;
	font-weight: normal;
}
.overview_table td {
	position: relative;
	background-color: #BFD4E7;
	text-align: center;
	cursor: pointer;
	width: 90px;
	height: 100%;
}
.overview_table td:first-child {
	width: 10px;
}
.overview_table td:nth-child(2) {
	position: relative;
	width: auto;
	text-align: left;
}
.overview_table tr:hover td {
	background-color: #7E93A6;
	color: #fff;
}
.overview_table tr.active td {
	background-color: #7E93A6;
	color: #fff;
}
.overview_table label {
	display: block;
	cursor: pointer;
	overlay: hidden;
	padding: 5px 10px;
	
    #border: 1px solid #f00;
}
.overview_table .standard {
	position: absolute;
	right: 5px;
	top: 5px;
	background-color: #E5020D;
	color: #fff;
	padding: 0px 5px;
	font-size: 12px;
	
	border: 1px solid #fff;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.overview_table input[type=radio] {
	#display: none; 
	#margin: 5px;
}
.overview_table input[type=radio] + label {
	background-color: #000;
	color: #fff;
}
.overview_table input[type=radio]:checked + label { 
	background-color:#E5020D;
	border: 2px solid #E5020D;
	color: #fff;
}
.overview_table input[type=radio] + label:hover { 
	background-color:#515151;
	border: 2px solid #515151;
}
.overview_table input[type=radio]:checked + label:hover { 
	background-color:#E5020D;
	border: 2px solid #E5020D;
}

Open in new window

kgp43Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Chris StanyonConnect With a Mentor Commented:
The way the jQuery is setup, a class of selected is added and removed to the labels as needed, but your default row is 'hilighted' because you have an active class added to the TR. Probably, the easiest option is to continue to use the active class, and just change the jQuery so the row gets the active class added instead of the labels getting the selected class. Try changing your jQuery to this:

$(document).ready(function() {
	$('input[type=radio]').change(function(){
		$('tr.active').removeClass('active');
		$(this).parents('tr').addClass('active');
	});
});

Open in new window

0
 
RobOwner (Aidellio)Commented:
You can't do this with CSS so here is a JS demo for you

http://jsbin.com/gavihi/1/edit?css,js,output

js / jquery added
$(function() {
  $('#a').on('change', function(e) {
    el = $(e.target);
    el.parents('tr').find('td > label').toggleClass('selected');
  });
});

Open in new window


css
.overview_table td > label.selected {
  background-color: green;
}

Open in new window

0
 
Chris StanyonCommented:
The change event will only get fired for the radio you select, so won't get fired for the others (that get de-selected). You'll need to remove the .selected class before adding it to the newly selected radio labels:

$('input[type=radio]').change(function(){
    $('.selected').removeClass('selected');
    $('label', $(this).parents('tr')).addClass('selected');
});

Open in new window


Working demo -> http://jsfiddle.net/ChrisStanyon/kkgtwunu/
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
RobOwner (Aidellio)Commented:
Thanks Chris for pointing that out. It's late and I need sleep :)
0
 
Chris StanyonCommented:
No worries Rob - it's the middle of the day here and I need sleep :)
0
 
kgp43Author Commented:
This is starting to freak me out, can't get it to work at all :(

Mind take a look? Maybe it's something simple and stupid.
http://configurator.hydra-comp.dk/conf_overview.php?cid=XCYAB6

Click the "Skift størrelse" button, as shown here (to expand the table):
help.png
0
 
Chris StanyonCommented:
For jQuery, you should always wrap your code in a document.ready block. If you don't do this, then the event binding will often happen before the page has fully loaded, and the elements you're trying to bind to won't yet exist.

$(document).ready(function() {
   $('input[type=radio]').change(function(){
      $('.selected').removeClass('selected');
      $('label', $(this).parents('tr')).addClass('selected');
   });
});

Open in new window

0
 
kgp43Author Commented:
Ha... that made a huge difference.
Try reload the page.

The default checked="checked" does not turn off when selecting another row.
Do you know how to fix that?

Also, how to make first td (input:radio) 100% height? This does not work:

.overview_table label {
	display: block;
	cursor: pointer;
	padding: 5px 10px;
	height: 100%;
	
    border: 1px solid #f00;
}

Open in new window

0
 
kgp43Author Commented:
Everything works now, perfect! :D
0
 
kgp43Author Commented:
SUPERB!
0
 
kgp43Author Commented:
Hmmm,

Background color does not change when I use the Reset button.

<button type="reset" class="button">Reset</button>
0
 
Chris StanyonCommented:
No - it won't. As I mentioned earlier, the change() event only gets fired when the radio is manually checked, and obviously this doesn't happen when you click the Reset button.

You will probably need to add a jquery script to the Reset buttons to fire the change() event. Something like this:

$('button[type=reset]').click(function(e) {
	e.preventDefault();
	var form = $(this).parents('form');
	form.trigger("reset");
	$('input[type=radio]:checked', form).change();
});

Open in new window

0
 
kgp43Author Commented:
Is it possible to change it to parent table instead of form? or even better, label?
0
 
Chris StanyonCommented:
The reset trigger resets a Form, not a table or label, so can't understand why you'd want to change it.

Your whole page is wrapped in one single form, so every Reset button within your page will reset the single form. Surely, you'd then want to fire the change() event for all the 'active' rows, so they also get reset.
0
 
kgp43Author Commented:
I see, my mistake - going to remove the reset buttons instead :)
Maybe I should wrap each table into a form and use some AJAX instead, just need to learn how that stuff works :p

Anyway, thanks for your help.
0
 
Chris StanyonCommented:
No worries.

Whether you wrap each table in it's own form will largely depend on what you need to do with the data - if the data in each table is independent of one another, then it makes sense to have each table in it's own form. If all the data needs processing in one go, then a single form would be better.

AJAX with jQuery is very straight forward, so may be a good option for you.

Lots of choices available, and if you get stuck, we're here to help.

Good luck with your project.
0
 
Chris StanyonCommented:
Yeah, you'll just need to grab the parent table and then filter the active rows by that. Something like this should do it

$(document).ready(function() {
	$('input[type=radio]').change(function(){
		var activeTable = $(this).parents('table');
		$('tr.active', activeTable).removeClass('active');
		$(this).parents('tr').addClass('active');
	});
});

Open in new window

0
 
kgp43Author Commented:
Hi Chris,

That worked perfectly!
I deleted my update before you replied, to create a new one.

Please post your solution here and I will give you points :)
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28618467.html

Thanks again.


, Kenneth
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.