Solved

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

Posted on 2015-02-09
18
313 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 42

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
 
LVL 42

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 42

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 42

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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 42

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 42

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 42

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 42

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

708 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now