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, Aug 20 '12 at 20:15
yes...Coltrane is always selected regardless of what I changed it to — tawheed, Aug 20 '12 at 20:16
Are you somehow storing the change say via AJAX? If not, why would you expect the change to stick? — j08691, Aug 20 '12 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, Aug 20 '12 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, Aug 20 '12 at 20:19
I dont think I would be able to use local storage because of the browsers my users use. Would it be possible to do something like `function checkRadioBut(){ document.getElementById("someID").checked=true }` And in my html do something like `Julliard ` — tawheed, Aug 20 '12 at 20:23
@koder22 that change will only keep the change client-side for the life of the current page. You have to persist the data somehow, either at the client (through local storage or cookies, as has been suggested), or by posting to the server into a database of some sort — Thomas Jones, Aug 22 '12 at 18:27

score 1 · Accepted Answer · edited May 23 '17 at 10:34

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 '17 at 10:34

Community

1
1

answered Aug 20 '12 at 20:20

Thomas Jones

4,892
26
34

Or cookies, or window.name, or fragment identifier... No need to send it back to the server. – Dagg Nabbit Aug 20 '12 at 20:22

score 0 · Answer 2 · answered Aug 20 '12 at 20:19

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.

score 0 · Answer 3 · answered Aug 20 '12 at 20:30

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;
    }
}

Check radio button in JavaScript

3 Answers3