[RESOLVED] How to select a radio button using javascript?

**rishirich4u** · 05-31-2008 10:37 AM

Hi,

I have 2 radio buttons as shown below:

<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes

I want to select one of this radio button, according to the following condition in javascript:

<script type="text/javascript">
if (<%=option1%> != ""){
// Radiobutton "No" should be selected.
}
else if (<%=option2%> != ""){
// Radiobutton "Yes" should be selected.
}
</script>

How can I do this in Javascript? Any help will be highly appreciated.

Thanks,
Rishi

**cgishack** · 05-31-2008 10:51 AM

First get the elements By Name
Second, set the index of the radio button you want checked to true

PHP Code:


function selectRadioButton()
{
var radioButtons = document.getElementsByName('poBoxRadio');
radioButtons[1].checked = true;
}

Drew

Here is a working sample

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script>

function selectRadioButton()
{
var radioButtons = document.getElementsByName('poBoxRadio');
radioButtons[1].checked = true;
}


</script>

</head>

<body>


<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="No"  /> No
<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes
<label>
<input type="submit" name="button" id="button" value="Submit" onclick="selectRadioButton()" />
</label>

</body>
</html>

**rishirich4u** · 05-31-2008 11:04 AM

Thanks a lot for the info.
But how can I make sure that one of the checkbox is checked as soon as the page is loaded, not using a submit button.

**cgishack** · 05-31-2008 11:15 AM

From your code above it looks like you are using ASP.NET

You might want to check on the server side if the checkbox control is checked in the Page_Load() method.

**rishirich4u** · 05-31-2008 11:31 AM

I am using JSP. I want one of the radiobuttons to be selected according to the condition mentioned in original post, as soon as the page is loaded, without using any submit button. I want to implement this in client-side itself.

Thanks,
Rishi

**cgishack** · 05-31-2008 12:08 PM

Try this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select Radio Button</title>

<script type="text/javascript">

function SelectRadioButtons()
{
	//DUMMY VARIABLES -- REPLACE WITH JSP VARS
	var option1 = "<%=option1%>";
	var option2 = "<%=option2%>";
	
	//Get readio buttons
	var radioButtons = document.getElementsByName('poBoxRadio');
	
	//validate
	if (option1 != "")
	{
		radioButtons[0].checked = true; //select NO
	}
	else if (option2 != "")
	{
		radioButtons[1].checked = true; //select YEs
	}
}


//ATTACH TO WINDOW ONLAD EVENT
window.onload = function() { SelectRadioButtons(); }
</script>

</head>
<body>
<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes
</body>
</html>

**JMRKER** · 05-31-2008 12:22 PM

I thought it was not a good idea to have duplicate ID values in a script?

PHP Code:


<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No

<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes

Are they really needed in this case?

**cgishack** · 05-31-2008 12:29 PM

Well I dont use the ID in the JS code.
I use document.getElementsByName(...)
I can then refer to the collection of elements through an array.

it all depends on how you reference the elements.
If you change the ID the current function will still work.
You you change the 'name' then it wont.

**Fang** · 05-31-2008 12:55 PM

Duplicate ids are invalid, don't use them.

Why are you not doing this server side?

**rishirich4u** · 05-31-2008 02:03 PM

I have solved this issue using the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var a='', b='d';
</script>
</head>
<body>
<input id="poBoxRadioNo" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
<input id="poBoxRadioYes" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes
<script type="text/javascript" defer="defer">

</script>
<input disabled type="button" value="UP" onclick="setVariable('move=1')">
</body>
</html>

Thanks to all of you!

Thread: [RESOLVED] How to select a radio button using javascript?

Thread Tools

Display

[RESOLVED] How to select a radio button using javascript?

Question ...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions