Solved

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

Posted on 2015-02-09
18
332 Views
Last Modified: 2015-02-17
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

0
Comment
Question by:kgp43
  • 8
  • 8
  • 2
18 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40598147
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40598203
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40598225
Thanks Chris for pointing that out. It's late and I need sleep :)
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40598246
No worries Rob - it's the middle of the day here and I need sleep :)
0
 

Author Comment

by:kgp43
ID: 40598375
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40598420
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
 

Author Comment

by:kgp43
ID: 40598440
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40598461
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
 

Author Comment

by:kgp43
ID: 40598480
Everything works now, perfect! :D
0
 

Author Closing Comment

by:kgp43
ID: 40598484
SUPERB!
0
 

Author Comment

by:kgp43
ID: 40600156
Hmmm,

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

<button type="reset" class="button">Reset</button>
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40600270
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
 

Author Comment

by:kgp43
ID: 40600390
Is it possible to change it to parent table instead of form? or even better, label?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40600428
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
 

Author Comment

by:kgp43
ID: 40600494
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40600504
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40614368
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
 

Author Comment

by:kgp43
ID: 40614461
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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question