asked on

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

leakim971

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

Steve Krile

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

davidw88

ASKER

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

Steve Krile

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.

davidw88

ASKER

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.

ASKER CERTIFIED SOLUTION

Steve Krile

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

davidw88

ASKER

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

Thanks skrile. You have a great weekend.

Steve Krile

My pleasure. Thanks!