aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes radio button using javascript DOM Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Soft Skills this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "radio button using javascript DOM" Watch "radio button using javascript DOM" New topic
Author

radio button using javascript DOM

Li Jenny
Ranch Hand

Joined: Apr 19, 2010
Posts: 57
how can i create two radio button in a row using DOM javascript
kv ruby
Ranch Hand

Joined: Jul 23, 2009
Posts: 38
Li Jenny wrote:how can i create two radio button in a row using DOM javascript


Hi Li,

is this what you are lookin for?

<tr>
<td><input type="radio"></td>
<td><input type="radio"></td>
</tr>


Regards, ruby kv
rubyshiv.blogspot.com
Anoop Pillai
Greenhorn

Joined: Oct 05, 2008
Posts: 9
Hi Li,

Try the below javascript code.




The Next Best Thing To Knowing Something Is Knowing Where To Find It.
Li Jenny
Ranch Hand

Joined: Apr 19, 2010
Posts: 57
thanks for your help.


but when i check another radiobutton, it seems can't appear checked.
the checked always appear in the first radio button. can't choose second one.
why?
Anoop Pillai
Greenhorn

Joined: Oct 05, 2008
Posts: 9
Li Jenny wrote:thanks for your help.


but when i check another radiobutton, it seems can't appear checked.
the checked always appear in the first radio button. can't choose second one.
why?



In the code the first radio button was checked using:


Similarly for checking the second radio button you would have to put:


Also you would have to remove the check code from the first radio button otherwise both the radio buttons will be checked by default.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Some elements have a problem with createElement and setting the name.

This code here [view source] solves the browser quirk: http://www.pascarello.com/examples/createElement.html

Eric
Li Jenny
Ranch Hand

Joined: Apr 19, 2010
Posts: 57
I know the defaultchecked is when i enter the page, the radiobutton is checked by default.
but the radio button can't let the user choose either of them.
when the user click on 1st radio button, then checked this button, and set the 2nd radio button checked to false.
if 2nd button is checked, then set the first button checked to false.
only one of them checked.

but now when i code rad1.defaultchecked=true, it is always true, even i click another button, it can't change the checked value to the button clicked.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Show us your broken code.

Eric
Li Jenny
Ranch Hand

Joined: Apr 19, 2010
Posts: 57
i just copied from the 2nd post's code as the code defaultchecked is set to rad1.
i can't select rad2 or rad1, as it is always checked at rad1.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61756
    
  67

Eric Pascarello wrote:Show us your broken code.

Eric


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Li Jenny
Ranch Hand

Joined: Apr 19, 2010
Posts: 57


i just copied this code but when i click on the rad2,it can't checked.
Anoop Pillai
Greenhorn

Joined: Oct 05, 2008
Posts: 9
Can you copy the code into a separate HTML file and see whether its working, may be the file in which you are including this code have other javascript errors and because of this the radio button code is not executing properly. So just trying copying this into a separate HTML file and see whether it works.

This code works fine with me; I have tested it on Mozilla Firefox 3.6.3 and Internet Explorer 8

Can you let us know which browser(along with version) are you testing it on?
Li Jenny
Ranch Hand

Joined: Apr 19, 2010
Posts: 57
IE 7
Anoop Pillai
Greenhorn

Joined: Oct 05, 2008
Posts: 9
Hi Li,

This is a bug in IE7. Basically in IE7 the browser doesn't generate the name attribute for radio button when its created dynamically.
To check that, just open the HTML file in your IE7 browser and after the file is loaded just type in address bar(in one line):
javascript:alert(document.getElementById('radioDiv').innerHTML);

Now you can observe in the alert that the radio input element doesn't have the name attribute; so its not behaving properly.

I suggest if you want to create radio buttons dynamically either go by Eric's suggestion:

This code here [view source] solves the browser quirk: http://www.pascarello.com/examples/createElement.html


Or you can simply use innerHTML, for ex:


 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: radio button using javascript DOM