[jQuery] Re: modifying a label when radio input selected
You could do something like this:
$('div#searchLabels label#labelRecipesCat').click(function() {
if (this.checked ){
$(''div#searchLabels
label#labelRecipesCat'').addClass('selected');
$(''div#searchLabels
label#labelEntireSite').removeClass('selected');
};
});
On Nov 13, 10:01 pm, sperks [EMAIL PROTECTED] wrote:
Apologies, if this comes through to the list twice (I waited a few
hours before pushing again).
Update. Here's the beautiful hunk of script that I have at the moment,
but I'm wanting to add the class to the label based on whether it's
associated input element is selected.
$(document).ready(function() {
$('div#searchLabels input').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonInputs'
});
});
$('div#searchLabels label').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonLabels'
});
});
$('div#searchLabels label#labelEntireSite').addClass(selected);
$('div#searchLabels label#labelEntireSite').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelRecipesCat').removeClass(selected);
});
$('div#searchLabels label#labelRecipesCat').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelEntireSite').removeClass(selected);
});
});
On Nov 13, 12:57 pm, sperks [EMAIL PROTECTED] wrote:
I have some formatting I want to add to a couple of radio buttons.
I'm wanting to hide the actual radio buttons and only show the labels
which I want to format differently depending on whether they're
related radio button is selected or not.
HTML:
div id=searchLabels
input type=radio value= id=entireSite selected=selected
name=cat
label for=entireSite class=selected id=labelEntireSiteEntire
Site/label
input type=radio value=recipes id=recipesCat name=cat
label for=recipesCat id=labelRecipesCatRecipes/label
/div
If I click on the recipes label (id=recipesCat) I want to change
it's class. I've been thinking along the lines of associating it via
it's corresponding input element becoming selected
([EMAIL PROTECTED]selected]), but I'm pretty new to jQuery and any
help getting me in the right direction would be great.
Thanks
Steve
[jQuery] Re: modifying a label when radio input selected
While you didn't give me the answer I was looking for, you inspired me
to mover forward in the right direction. I finally got the result I
was after. Here's the script I ended with (anyone wants to tighten
this please I'd be more than welcome!)
$(document).ready(function() {
var $inputId = $('div.searchInputs input[selected=selected]');
$('div#searchLabels label[for=$inputId]').addClass(selected);
$('div#searchLabels input').each(function(index) {
var $thisInput = $(this);
$thisInput.addClass('buttonInputs');
});
$('div#searchLabels label').each(function(index) {
var $thisLabel = $(this);
$thisLabel.addClass('buttonLabels');
});
$('div#searchLabels label#labelEntireSite').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelRecipesCat').removeClass(selected);
});
$('div#searchLabels label#labelRecipesCat').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelEntireSite').removeClass(selected);
});
});
On Nov 14, 10:26 am, whutevr [EMAIL PROTECTED] wrote:
You could do something like this:
$('div#searchLabels label#labelRecipesCat').click(function() {
if (this.checked ){
$(''div#searchLabels
label#labelRecipesCat'').addClass('selected');
$(''div#searchLabels
label#labelEntireSite').removeClass('selected');
};
});
On Nov 13, 10:01 pm, sperks [EMAIL PROTECTED] wrote:
Apologies, if this comes through to the list twice (I waited a few
hours before pushing again).
Update. Here's the beautiful hunk of script that I have at the moment,
but I'm wanting to add the class to the label based on whether it's
associated input element is selected.
$(document).ready(function() {
$('div#searchLabels input').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonInputs'
});
});
$('div#searchLabels label').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonLabels'
});
});
$('div#searchLabels label#labelEntireSite').addClass(selected);
$('div#searchLabels label#labelEntireSite').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelRecipesCat').removeClass(selected);
});
$('div#searchLabels label#labelRecipesCat').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelEntireSite').removeClass(selected);
});
});
On Nov 13, 12:57 pm, sperks [EMAIL PROTECTED] wrote:
I have some formatting I want to add to a couple of radio buttons.
I'm wanting to hide the actual radio buttons and only show the labels
which I want to format differently depending on whether they're
related radio button is selected or not.
HTML:
div id=searchLabels
input type=radio value= id=entireSite selected=selected
name=cat
label for=entireSite class=selected
id=labelEntireSiteEntire
Site/label
input type=radio value=recipes id=recipesCat name=cat
label for=recipesCat id=labelRecipesCatRecipes/label
/div
If I click on the recipes label (id=recipesCat) I want to change
it's class. I've been thinking along the lines of associating it via
it's corresponding input element becoming selected
([EMAIL PROTECTED]selected]), but I'm pretty new to jQuery and any
help getting me in the right direction would be great.
Thanks
Steve
[jQuery] Re: modifying a label when radio input selected
Apologies, if this comes through to the list twice (I waited a few
hours before pushing again).
Update. Here's the beautiful hunk of script that I have at the moment,
but I'm wanting to add the class to the label based on whether it's
associated input element is selected.
$(document).ready(function() {
$('div#searchLabels input').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonInputs'
});
});
$('div#searchLabels label').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonLabels'
});
});
$('div#searchLabels label#labelEntireSite').addClass(selected);
$('div#searchLabels label#labelEntireSite').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelRecipesCat').removeClass(selected);
});
$('div#searchLabels label#labelRecipesCat').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelEntireSite').removeClass(selected);
});
});
On Nov 13, 12:57 pm, sperks [EMAIL PROTECTED] wrote:
I have some formatting I want to add to a couple of radio buttons.
I'm wanting to hide the actual radio buttons and only show the labels
which I want to format differently depending on whether they're
related radio button is selected or not.
HTML:
div id=searchLabels
input type=radio value= id=entireSite selected=selected
name=cat
label for=entireSite class=selected id=labelEntireSiteEntire
Site/label
input type=radio value=recipes id=recipesCat name=cat
label for=recipesCat id=labelRecipesCatRecipes/label
/div
If I click on the recipes label (id=recipesCat) I want to change
it's class. I've been thinking along the lines of associating it via
it's corresponding input element becoming selected
([EMAIL PROTECTED]selected]), but I'm pretty new to jQuery and any
help getting me in the right direction would be great.
Thanks
Steve
[jQuery] Re: modifying a label when radio input selected
Just to show that I'm doing some work on my own and not just fishing
for solutions. I have the functionality working, but I'm wanting to
target the label element based on whether the related input element is
selected or not, rather than on click. The reason for this is that
the radio input is defined as to whether it's selected elsewhere.
Here's where I'm at:
HTML:
fieldset id=search
legendSearch:/legend
form name=keyword method=get action=/searchresults/
div id=searchLabels
input type=radio value= id=entireSite !--#if
expr='$cat !
= recipes' --selected=selected !--#else --!--#endif --
name=cat
label for=entireSite !--#if expr='$cat !=
recipes' --
class=selected !--#else --!--#endif --
id=labelEntireSiteEntire Site/label
input type=radio value=recipes id=recipesCat
!--#if
expr='$cat != recipes' --!--#else --class=selected
selected=selected !--#endif --name=cat
label for=recipesCat !--#if expr='$cat !=
recipes' --!--
#else --class=selected !--#endif --id=labelRecipesCatRecipes/
label
/div
div class=searchInputs
input type=text name=terms value=!--#if
expr='$terms !=
' --!--#echo var=terms--!--#else --Search
onblur=if(this.value=='') this.value='Search';
onfocus=if(this.value=='Search') this.value='';!--#endif -- /
input type=image src=/images/search_button.gif
class=button
alt=Go /
/div
/form
/fieldset
CSS:
#search { font-family: 'Trebuchet MS',arial; float: right; padding:
20px 10px 0 0; text-align: right; margin: 0; width: 293px; border-
width: 0; font-size: 10px; background: url('/images/searchBg.gif') no-
repeat left 44px; }
#search legend { display: none; }
#search #searchLabels { text-align: left; padding-left: 10px; width:
283px; overflow: hidden; }
#search #searchLabels label { line-height: 25px; height: 25px; }
#search #searchLabels label.buttonLabels { display: block; float:
left; text-align: center; margin: 0 -5px 0 0; width: 77px; }
#search #searchLabels label.selected { background: url('/images/
searchTabBg.gif') no-repeat left top; }
#search #searchLabels input.buttonInputs { visibility: hidden;
position: absolute; }
#search .searchInputs { padding: 7px 8px 8px; text-align: right; }
#search .searchInputs input { padding: 2px; vertical-align: bottom;
color: #5f561d; width: 206px; margin: 0; }
#search .searchInputs input.button { border: 0; padding: 0; width:
56px; margin: 0; }
jQuery:
$(document).ready(function() {
$('div#searchLabels input').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonInputs'
});
});
$('div#searchLabels label').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonLabels'
});
});
$('div#searchLabels label#labelEntireSite').addClass(selected);
$('div#searchLabels label#labelEntireSite').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelRecipesCat').removeClass(selected);
});
$('div#searchLabels label#labelRecipesCat').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelEntireSite').removeClass(selected);
});
});
On Nov 13, 12:57 pm, sperks [EMAIL PROTECTED] wrote:
I have some formatting I want to add to a couple of radio buttons.
I'm wanting to hide the actual radio buttons and only show the labels
which I want to format differently depending on whether they're
related radio button is selected or not.
HTML:
div id=searchLabels
input type=radio value= id=entireSite selected=selected
name=cat
label for=entireSite class=selected id=labelEntireSiteEntire
Site/label
input type=radio value=recipes id=recipesCat name=cat
label for=recipesCat id=labelRecipesCatRecipes/label
/div
If I click on the recipes label (id=recipesCat) I want to change
it's class. I've been thinking along the lines of associating it via
it's corresponding input element becoming selected
([EMAIL PROTECTED]selected]), but I'm pretty new to jQuery and any
help getting me in the right direction would be great.
Thanks
Steve
