Solved

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

Posted on 2015-02-09
18
371 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 8
  • 2
18 Comments
 
LVL 43

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
ID: 40598225
Thanks Chris for pointing that out. It's late and I need sleep :)
0
Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.

 
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

Get Actionable Data from Your Monitoring Solution

Your communication platform is only as good as the relevance of the information you send. Ensure your alerts get to the right people every time with actionable responses. Create escalation rules that ensure everyone follows the process and nothing is left to chance.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

719 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