Javascript单选按钮在FF和Chrome中有效，但在IE中不起作用

Question

I have to validate if the radiobox is checked.

HTML

<input style="width:20px;" id="radio1" type="radio" name="benvoor" class="benvoor"  value="Ik ben voor" /> <label for="radio1">Ik ben voor. </label><br />
<input style="width:20px;" id="radio2" type="radio" name="benvoor" class="benvoor"  value="Ik ben tegen" /> <label for="radio2">Ik ben tegen.</label>

JavaScript/jQuery

//Assume no radio checked first
var benvoor = false;
for (i in aanmeldform.benvoor) {
    // Is the element checked?
    if (aanmeldform.benvoor[i].checked) {
        //Choice has been made
        benvoor = true;
        // Cancel the loop if the checked element is found
        break;
    }
}

// If no choice has been made, put it in the errorList
if (!benvoor) errorList.push("benvoor");

// Cancel submit if errors are found
if (errorList.length > 0) {
    document.getElementById("errorMessage").innerHTML = "Graag uw keuze maken";    
    $("#radiobutton label").addClass("rood");
    $("html, body").animate({
        scrollTop: $(this).offset().top
    }, 1000);
    return false;
}​

Answer 1

Given that you're using jQuery, you can do this:

if ($(':radio[name="benvoor"]:checked').length === 0) {
   // none are checked, do something
}

That is, find all radio buttons of that name that are checked, and if the resulting jQuery object has a length of 0 then none are checked.

Simple demo: http://jsfiddle.net/WKKby/

You don't show much of your html, but from your JS it looks like the radio buttons are inside an element with the id "radiobutton" so you might want to include that in your jQuery selector:

if ($('#radiobutton :radio[name="benvoor"]:checked').length === 0) {

Answer 2

If you are using jquery anyway, probably go with @nnnnnn answer, but there is your code slightly modified in a jsFiddle: http://jsfiddle.net/p9bs3/5/

var benvoor = false;
for (var i =0;i < aanmeldform.benvoor.length;i++) {
    // Is the element checked?
    if (aanmeldform.benvoor[i].checked) {
        //Choice has been made
        benvoor = true;
        // Cancel the loop if the checked element is found
        break;
    }
}

It seems IE handle formcollections different than a regular array. The following code produces two different results in chrome and IE.

<form id="frm">
    <input type="radio" name="rdio">
    <input type="radio" name="rdio">
</form>

Script:

var arr = [1,2];
for(i in arr){
    console.log(i);    
}

console.log('-----');
for(i in frm.rdio){
    console.log(i);    
}

Chrome

0
1
-----
0
1
length
item

IE​

0 
1 
------------ 
rdio 
length 
item 
namedItem 

for in loops are often cause for problems in javascript imo, use helpers like jquery's each or do a regular for loop, like I have in the example above.