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

jQuery: how to change the label of this radio box

Hi experts,

There is a check box "A" and radio button "B". Button "B" has a label of "View in browser".  If box "A" is checked, I want the label of "View in browser" to become to color green. The label's original color is black.

Attached is related jQuery script. Can anybody tell me how to do this?

Thanks so much.
<input name=outputFormat type="radio"  id="browser" value='browser'   <c:if test="${outputFormat == 'browser'}">checked</c:if>  <c:if test="${subidCheck=='subid'}">disabled</c:if> />View in browser


-------------------------------------------
When checkbox "A" is checked, the following module is called. 

     if (textInput == 'subid')
        {
                $('#csv').attr('checked', 'checked');
                $('#browser').attr('disabled', 'disabled');

                // this is not correct. How to write this? 
                $('#browser').titleLabel.textColor = [UIColor greenColor];


        }

Open in new window

0
davidw88
Asked:
davidw88
  • 4
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
Using :

<input name=outputFormat type="radio"  id="browser" value='browser'   <c:if test="${outputFormat == 'browser'}">checked</c:if>  <c:if test="${subidCheck=='subid'}">disabled</c:if> /><span id="titleLabel">View in browser</span>

Open in new window


You may use :

$("#titleLabel").css({"color":"green"});

Open in new window

0
 
Steve KrileCommented:
How about something like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>


<title>Untitled Page</title>
<style>
	html {font-family: Arial;}

	}
</style>
	<input name="outputFormat" type="radio"  id="browser" value="browser" checked /><label for="browser">View in Browser</label>
	<input name="outputFormat" type="radio"  id="csv" value="csv" /><label for="csv">View CSV</label>
</head>
<body>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
    	//fire the toggle function after the page loads the first time.  This will allow you to set the checked value
    	//with code-behind and not have to do anything extra in terms of jquery
		labelBack()

		//wire up a change event on the radio inputs
		$("input[name=outputFormat]").change(function(){
			labelBack()
		})
    })

	function labelBack() {
		//determine whether the browser radio is checked.  Set a color variable
		//as appropriate
		var bgColor = ($("#browser").attr("checked")) ? "green" : "#fff" ;

		//change the label background of the browser input's label
		$("#browser").next().css({"background-color" : bgColor})
	}

</script>
</body>
</html>

Open in new window

0
 
davidw88Author Commented:
Thanks experts for your replies. I tried your suggestions besides others (refer to the attached script), however none of them changed that label's color.

Any more suggestions?

Thanks a lot.


if (textInput == 'subid')
        {
                var bgColor = ($("#browser").attr("checked"))? "#000000":"green";

                $("#browser").css({"background-color" : bgColor});

                $("#browser").css("background-color","yellow");
                 $('#browser').next().css('color', 'green');

$("#browser").css({"color":"green"});

                // the following two lines work correctly
                $('#csv').attr('checked', 'checked');
                $('#browser').attr('disabled', 'disabled');

          }

Open in new window

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Steve KrileCommented:
The code you attached to your last post has syntax problems.  There are missing symbols and redundancies.  Did you run my code stand-alone?  It does precisely what you want.  Then you can work it back in to your "real" code.
0
 
davidw88Author Commented:
Just found why it did not work... I forgot "<label for="browser">View in Browser</label>"!

Now it works. Thanks skrile!

Let me do a little more tests.
0
 
Steve KrileCommented:
From my example, and for clarity:

$("#browser")   will select the radio input element.
$("#browser").next()  will select the VERY next html element from the browser input.  In this case, a Label.

0
 
davidw88Author Commented:
Works perfect!   I increase the points to 250 in order to show my appreciation for your help.

Thanks skrile. You have a great weekend.
0
 
Steve KrileCommented:
My pleasure.  Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

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