Check radio button in JavaScript

Question

The default value of one on my radio boxes on my page is set to checked. I noticed that when I change the selection and reload the page, the check goes back to the default value. I was wondering whether there is a way in JavaScript to programatically set the value checked property of my radio elements.

This is my html:

<body>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Aitken"   >Aitken</TD>
  <TD><INPUT TYPE="radio" NAME="Performer" VALUE="Coltrane"  CHECKED>Coltrane</TD>
  <TD><INPUT TYPE="radio" NAME="Performer" VALUE="Julliard" >Julliard</TD>
  <TD><INPUT TYPE="radio" NAME="Performer" VALUE="Kronos"  >Kronos</TD>
  <TD><INPUT TYPE="radio" NAME="Performer" VALUE="Waits"  >Waits</TD>
<input type="submit" id="submit_button"name="sunmit">
</body>

So you're saying every time you reload the page, Coltrane is checked regardless of what you change it to? — j08691
– j08691, Commented Aug 20, 2012 at 20:15
yes...Coltrane is always selected regardless of what I changed it to — tawheed
– tawheed, Commented Aug 20, 2012 at 20:16
Are you somehow storing the change say via AJAX? If not, why would you expect the change to stick? — j08691
– j08691, Commented Aug 20, 2012 at 20:17
Actually I am not storing it using AJAX or any other mechanism. I figured that was the default behavior and was wondering whether it is possible to do that using javascript — tawheed
– tawheed, Commented Aug 20, 2012 at 20:18
To answer your question yes, you can store the value with JavaScript alone or in conjunction with a server side language. — j08691
– j08691, Commented Aug 20, 2012 at 20:19

Community · Accepted Answer · 2017-05-23 10:34:39Z

1

Html, by nature, is stateless. Changing the value of something on a page does absolutely nothing, unless you actually do something with it.

In order to persist this value, you have to send it back to your server (either through AJAX, or a traditional form submit) and instead of having a hardcoded value, use a dynamic language of your choice.

You can also use local storage to have a javascript implementation that is specific to the user/machine.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Aug 20, 2012 at 20:20

Thomas Jones

4,94730 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dagg Nabbit Over a year ago

Or cookies, or window.name, or fragment identifier... No need to send it back to the server.

David Hellsing · Accepted Answer · 2012-08-20 20:19:19Z

0

You can set a cookie each time someone checks/unchecks that contains all checked elements, then re-check them based on the cookie data on page load.

But I wouldn’t recommend it unless you know what you are doing as you will be jeopardizing usability when you do something "unexpected" with forms.

answered Aug 20, 2012 at 20:19

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Comments

Jesse Hallett · Accepted Answer · 2012-08-20 20:30:00Z

Once you know which button should be checked, using a cookie value or localStorage as other answers suggest, you can indeed check a button using javascript. Here is a jQuery snippet:

var valueToCheck = "Kronos";  // assume you have a known value like this one
$('input[name="Performer"][value="'+ valueToCheck +'"]').prop('checked', true);

If you do not have jQuery available you can use native code. Each input element has a value attribute and radio buttons also have a checked attribute:

var buttons = document.getElementsByTagName('input'), button;
for (var i = 0; i < buttons.length; i += 1) {
    button = buttons[i];
    if (button.name === "Performer" && button.value === valueToCheck) {
        button.checked = true;
        break;
    }
}

Collectives™ on Stack Overflow

Check radio button in JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related