• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 920
  • Last Modified:

CSS Label on Check background colour on uncheck remove style

Hi,

I'm trying to get a style attribute applied to a label when the radio button associated with the label is checked and removed when the radio button is unchecked.

The first part works fine, but when I check an alternative radio button, the stylew is still applied to the original selection..

What am I doing wrong? I'm using JQuery and CSS.

My JQuery reads --

<script type="text/javascript">
var $ = jQuery.noConflict();
$(function(){
  $('label').click(function() {
    var cb = $('#' + $(this).attr('for'));
	if (cb.is(':checked')) {
		$(this).addClass('checked');
	}
	else {
		$(this).removeClass('checked');
	}
  });
});
</script>

Open in new window


my HTML is -

<form action="suppliersurvey.asp" method="post" enctype="application/x-www-form-urlencoded" name="BrandRate" id="BrandRate" style="float:left; width:100%;">
  <img name="" src="http://docs.tgigolf.com/partner_logos/<%=arrSelectedBrand(1,0)%>" alt="" /><p>Rate the Brands you stocked </p>
  <p>Please answer the questions below to rate xxxx</p>
  <table width="100%" border="0" cellpadding="0" cellspacing="0" class="tableodd">
    <tr class="head">
      <th class="titlecolumn">&nbsp;</th>
      <th class="datacolumnhd">Below Average</th>
      <th class="datacolumnhd">Average</th>
      <th class="datacolumnhd">Above Average</th>
      <th class="datacolumnhd">Excellent</th>
      <th class="datacolumnhd">Exceptional</th>
      <th class="datacolumnhd">No Opinion</th>
    </tr>
    <tr>
      <td class="titlecolumn">Saleability </td>
      <td class="datacolumn"><label for="saleability_1"><input type="radio" name="saleability" value="1" id="saleability_1" /></label></td>
      <td class="datacolumn"><label for="saleability_2"><input name="saleability" type="radio" id="saleability_2" value="2" checked="checked" /></label></td>
      <td class="datacolumn"><label for="saleability_3"><input type="radio" name="saleability" value="3" id="saleability_3" /></label></td>
      <td class="datacolumn"><label for="saleability_4"><input type="radio" name="saleability" value="4" id="saleability_4" /></label></td>
      <td class="datacolumn"><label for="saleability_5"><input type="radio" name="saleability" value="5" id="saleability_5" /></label></td>
      <td class="datacolumn"><label for="saleability_0"><input type="radio" name="saleability" value="2.5" id="saleability_0" /></label></td>
    </tr>
  <tr>
    <td class="titlecolumn">Quality</td>
    <td class="datacolumn"><label for="Quality_1"><input type="radio" name="Quality" value="1" id="Quality_1" /></label></td>
    <td class="datacolumn"><label for="Quality_2"><input name="Quality" type="radio" id="Quality_2" value="2" checked="checked" /></label></td>
    <td class="datacolumn"><label for="Quality_3"><input type="radio" name="Quality" value="3" id="Quality_3" /></label></td>
    <td class="datacolumn"><label for="Quality_4"><input type="radio" name="Quality" value="4" id="Quality_4" /></label></td>
    <td class="datacolumn"><label for="Quality_5"><input type="radio" name="Quality" value="5" id="Quality_5" /></label></td>
    <td class="datacolumn"><label for="Quality_0"><input type="radio" name="Quality" value="2.5" id="Quality_0" /></label></td>
  </tr>
  <tr>
    <td class="titlecolumn">Availability</td>
    <td class="datacolumn"><label for="Availability_1"><input type="radio" name="Availability" value="1" id="Availability_1" /></label></td>
    <td class="datacolumn"><label for="Availability_2"><input name="Availability" type="radio" id="Availability_2" value="2" checked="checked" /></label></td>
    <td class="datacolumn"><label for="Availability_3"><input type="radio" name="Availability" value="3" id="Availability_3" /></label></td>
    <td class="datacolumn"><label for="Availability_4"><input type="radio" name="Availability" value="4" id="Availability_4" /></label></td>
    <td class="datacolumn"><label for="Availability_5"><input type="radio" name="Availability" value="5" id="Availability_5" /></label></td>
    <td class="datacolumn"><label for="Availability_0"><input type="radio" name="Availability" value="2.5" id="Availability_0" /></label></td>
  </tr>
  <tr>
    <td class="titlecolumn">Delivery</td>
    <td class="datacolumn"><label for="Delivery_1"><input type="radio" name="Delivery" value="1" id="Delivery_1" /></label></td>
    <td class="datacolumn"><label for="Delivery_2"><input name="Delivery" type="radio" id="Delivery_2" value="2" checked="checked" /></label></td>
    <td class="datacolumn"><label for="Delivery_3"><input type="radio" name="Delivery" value="3" id="Delivery_3" /></label></td>
    <td class="datacolumn"><label for="Delivery_4"><input type="radio" name="Delivery" value="4" id="Delivery_4" /></label></td>
    <td class="datacolumn"><label for="Delivery_5"><input type="radio" name="Delivery" value="5" id="Delivery_5" /></label></td>
    <td class="datacolumn"><label for="Delivery_0"><input type="radio" name="Delivery" value="2.5" id="Delivery_0" /></label></td>
  </tr>
  <tr>
    <td class="titlecolumn">Returns</td>
    <td class="datacolumn"><label for="Returns_1"><input type="radio" name="Returns" value="1" id="Returns_1" /></label></td>
    <td class="datacolumn"><label for="Returns_2"><input name="Returns" type="radio" id="Returns_2" value="2" checked="checked" /></label></td>
    <td class="datacolumn"><label for="Returns_3"><input type="radio" name="Returns" value="3" id="Returns_3" /></label></td>
    <td class="datacolumn"><label for="Returns_4"><input type="radio" name="Returns" value="4" id="Returns_4" /></label></td>
    <td class="datacolumn"><label for="Returns_5"><input type="radio" name="Returns" value="5" id="Returns_5" /></label></td>
    <td class="datacolumn"><label for="Returns_0"><input type="radio" name="Returns" value="2.5" id="Returns_0" /></label></td>
  </tr>
  <tr>
    <td class="titlecolumn">Retail Price</td>
    <td class="datacolumn"><label for="Retail_1"><input type="radio" name="Retail" value="1" id="Retail_1" /></label></td>
    <td class="datacolumn"><label for="Retail_2"><input name="Retail" type="radio" id="Retail_2" value="2" checked="checked" /></label></td>
    <td class="datacolumn"><label for="Retail_3"><input type="radio" name="Retail" value="3" id="Retail_3" /></label></td>
    <td class="datacolumn"><label for="Retail_4"><input type="radio" name="Retail" value="4" id="Retail_4" /></label></td>
    <td class="datacolumn"><label for="Retail_5"><input type="radio" name="Retail" value="5" id="Retail_5" /></label></td>
    <td class="datacolumn"><label for="Retail_0"><input type="radio" name="Retail" value="2.5" id="Retail_0" /></label></td>
  </tr>
  <tr>
    <td class="titlecolumn">Service Support</td>
    <td class="datacolumn"><label for="Service_1"><input type="radio" name="Service" value="1" id="Service_1" /></label></td>
    <td class="datacolumn"><label for="Service_2"><input name="Service" type="radio" id="Service_2" value="2" checked="checked" /></label></td>
    <td class="datacolumn"><label for="Service_3"><input type="radio" name="Service" value="3" id="Service_3" /></label></td>
    <td class="datacolumn"><label for="Service_4"><input type="radio" name="Service" value="4" id="Service_4" /></label></td>
    <td class="datacolumn"><label for="Service_5"><input type="radio" name="Service" value="5" id="Service_5" /></label></td>
    <td class="datacolumn"><label for="Service_0"><input type="radio" name="Service" value="2.5" id="Service_0" /></label></td>
  </tr>
  <tr>
    <td class="titlecolumn">Sales Rep</td>
    <td class="datacolumn"><label for="Rep_1"><input type="radio" name="Rep" value="1" id="Rep_1" /></label></td>
    <td class="datacolumn"><label for="Rep_2"><input name="Rep" type="radio" id="Rep_2" value="2" checked="checked" /></label></td>
    <td class="datacolumn"><label for="Rep_3"><input type="radio" name="Rep" value="3" id="Rep_3" /></label></td>
    <td class="datacolumn"><label for="Rep_4"><input type="radio" name="Rep" value="4" id="Rep_4" /></label></td>
    <td class="datacolumn"><label for="Rep_5"><input type="radio" name="Rep" value="5" id="Rep_5" /></label></td>
    <td class="datacolumn"><label for="Rep_0"><input type="radio" name="Rep" value="2.5" id="Rep_0" /></label></td>
  </tr>
  <tr>
    <td class="titlecolumn">Accounts</td>
    <td class="datacolumn"><label for="Accounts_1"><input type="radio" name="Accounts" value="1" id="Accounts_1" /></label></td>
    <td class="datacolumn"><label for="Accounts_2"><input name="Accounts" type="radio" id="Accounts_2" value="2" checked="checked" /></label></td>
    <td class="datacolumn"><label for="Accounts_3"><input type="radio" name="Accounts" value="3" id="Accounts_3" /></label></td>
    <td class="datacolumn"><label for="Accounts_4"><input type="radio" name="Accounts" value="4" id="Accounts_4" /></label></td>
    <td class="datacolumn"><label for="Accounts_5"><input type="radio" name="Accounts" value="5" id="Accounts_5" /></label></td>
    <td class="datacolumn"><label for="Accounts_0"><input type="radio" name="Accounts" value="2.5" id="Accounts_0" /></label></td>
  </tr>
    <tr>
      <td class="titlecolumn">Credit Control</td>
      <td class="datacolumn"><label for="Credit_1"><input type="radio" name="Credit" value="1" id="Credit_1" /></label></td>
      <td class="datacolumn"><label for="Credit_2"><input name="Credit" type="radio" id="Credit_2" value="2" checked="checked" /></label></td>
      <td class="datacolumn"><label for="Credit_3"><input type="radio" name="Credit" value="3" id="Credit_3" /></label></td>
      <td class="datacolumn"><label for="Credit_4"><input type="radio" name="Credit" value="4" id="Credit_4" /></label></td>
      <td class="datacolumn"><label for="Credit_5"><input type="radio" name="Credit" value="5" id="Credit_5" /></label></td>
      <td class="datacolumn"><label for="Credit_0"><input type="radio" name="Credit" value="2.5" id="Credit_0" /></label></td>
    </tr>
  </table>
<ul><li><label for="nextyear">Deal with Next Year</label>
    <input name="nextyear" type="checkbox" id="nextyear" value="Y" /></li>
  <li><label for="nextyearreason">If not Why Not</label>
    <select name="nextyearreason" id="nextyearreason">
      <option value="0" selected="selected">Will Use Next Year</option>
      <option value="1">Too Expensive</option>
      <option value="2">Unreliable</option>
      <option value="3">Poor Quality</option>
      <option value="4">Hard to Sell</option>
      <option value="5">Alternative Supplier</option>
      <option value="6">Other</option>
    </select></li></ul>
    <input name="button2" type="submit" class="button black" id="button2" value="Next &raquo;" />
    <input name="BrandUpdate" type="hidden" id="BrandUpdate" value="update" />
    <input name="ID" type="hidden" id="ID" value="xxxx" />
    <input name="Completed" type="hidden" id="Completed" value="Y" />
</form>

Open in new window


my CSS reads --

#BrandRate{float:left;	width:100%;}
#BrandRate img{width:218px; float:right; clear:left; padding:4px; margin-left:8px; margin-right: 0px;}
#BrandRate .tableodd{float:left;}
#BrandRate .tableeven{background-color:#F8F8F8; float:left;}
#BrandRate .datacolumnhd{
	width:94px;
	text-align: center;
	font-size: 12px;
	padding:8px 3px;
	/* [disabled]color:#515151; */
}
#BrandRate .datacolumn{
	text-align:center;
	/* [disabled]padding:3px; */
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	border-color: #EAEAEA;
}
#BrandRate td.titlecolumn{
	text-align:left;
	padding:14px 8px;
	font-size:13px;
	/* [disabled]text-decoration:underline; */
	background-color: #EEEEEE;
	border-width: 1px;
	border-style: solid;
	border-color: #EAEAEA;
	border-collapse: collapse;
	color: #333;
}
#BrandRate .tableodd label{
	display:block;
	width:100%;
	/* [disabled]height:41px; */
	/* [disabled]line-height: 35px; */
	padding: 14PX 0PX;
}
#BrandRate .checked{
	background-color:#E4E4E4;
}
#BrandRate ul{
	list-style:none;
	margin: 20px 0px;
	/* [disabled]padding:8px; */
	float: left;
	width: 100%;
}
#BrandRate ul label{
	width:160px;
	float:left;
	display:block;
	font-size: 13px;
	/* [disabled]text-decoration: underline; */
}
#BrandRate table tr.head{background-image:url(/png/sstbhead.gif); background-position:top; background-color:#333333;}
#BrandRate table th{padding:6px; color:#CCCCCC; text-align:left;}

#BrandRate select{width:260px; color: #696969;}

Open in new window


Also you'll see that there are default radio buttons checked, I need the label for these to be highlighted when the page loads.

Thanks
0
garethtnash
Asked:
garethtnash
  • 2
2 Solutions
 
ChrisCommented:
Try this
<script type="text/javascript">
var $ = jQuery.noConflict();
$(function(){
  $('label').click(function() {
    var cb = $('#' + $(this).attr('for'));
    $(.checked).removeClass('checked');
    if (cb.is(':checked')) {
        $(this).addClass('checked');
    }
  });
});
</script>

Open in new window

0
 
ChrisCommented:
Ignore that last post. I didn't realise exactly what you were after.

This works:

<script type="text/javascript">
var $ = jQuery.noConflict();
$(function(){
  $('label').click(function() {
	$(this).parent().parent().children().children('.checked').removeClass('checked');
    var cb = $('#' + $(this).attr('for'));
	if (cb.is(':checked')) {
		$(this).addClass('checked');
	}
  });
});
</script>

Open in new window

0
 
Chris StanyonCommented:
Because a radio button can't be unchecked by clicking it, there's no need to check for ':checked'. Simple remove .checked for all the labels in the row and then add it to the one that was clicked.

$(document).ready(function() {
	$('label').click(function() {
		$(this).closest('tr').find('.checked').removeClass('checked');
		$(this).addClass('checked');
	});
});

Open in new window

0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now