CODEWITHSUNDEEP
javascripthtml
etm124
etm124

Reputation: 2140

JavaScript .checked on radio buttons acting odd

I am trying to force a user to select a radio option on a page, but when the user checks the 'No' option, my .checked value is coming up false. 

var long = document.getElementById('long');

if(long.checked == false){
  message += '- Please select your stance\\r\\n';
  errors = true;
}

<input name='long' id='long' type='radio' value='Yes' >Yes 
<input name='long' id='long' type='radio' value='No' >No

Upvotes: 0

Views: 2403

Answers (6)

Kory Hodgson
Kory Hodgson

Reputation: 790

You have the same id for both radio buttons, the names need to stay the same but they must have different ids

Try this:

var longYes            = document.getElementById('longYes');
var longNo            = document.getElementById('longNo');

if(longYes.checked == false && longNo.checked == false){
    message += '- Please select your stance\\r\\n';
    errors = true;
}


  <input name='long' id='longYes' type='radio' value='Yes' >Yes 
  <input name='long'  id='longNo' type='radio' value='No' >No

Upvotes: 0

Richard Dalton
Richard Dalton

Reputation: 35803

Both radio buttons have the same ID so it is only getting the first one from the getElementById call.

Change your code to use document.getElementsByName("long") then loop over and check each one:

var long = document.getElementsByName('long'), message = "";
var checked = false;
for (var i = 0; i < long.length; i++) {
    if (long[i].checked) {
        checked = true;
    }
}

if(!checked){
    message += '- Please select your stance\\r\\n';
    alert(message);
}

With none checked - http://jsfiddle.net/myFhm/ With no checked - http://jsfiddle.net/myFhm/1/

Upvotes: 0

scottm
scottm

Reputation: 28699

You can't have two checkboxes with the same ID property. Give them each a different ID and it should work properly.

var long            = document.getElementById('longNo');

if(long.checked == false){
    message += '- Please select your stance\\r\\n';
    errors = true;
}


  <input name='long' id='longYes' type='radio' value='Yes' >Yes 
  <input name='long'  id='longNo' type='radio' value='No' >No

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114447

IDs must be unique, according to the HTML spec, therefore your code will not work as written.

If you look at it from a FORM approach, the radio buttons are an array:

var radios = document.form1.long
for(var x=0;x<radios.length;x++) {
     alert(radios[x].value)
}

So you can check if YES is selected like this because YES is the first element in the array.

var radios = document.form1.long
if(radios[0].checked) { ... }

Upvotes: 1

Pointy
Pointy

Reputation: 414086

You can't give two elements the same "id" value. You could use .getElementsByName() to find the set of radio buttons, and then look for the one that's checked, or give them two different "id" values (which is what I'd probably do).

<input name='long' id='long_yes' type='radio' value='Yes'>Yes
<input name='long' id='long_no' type='radio' value='No'>No

Upvotes: 1

Herms
Herms

Reputation: 38878

Both of your inputs have an id of "long", so getElementById is probably returning the first one, which is the "Yes" button.

Upvotes: 1

Related Questions