JavaScript.检查了单选按钮的异常行为

Question

我试图强制用户在页面上选择单选选项，但当用户选中"否"选项时，我的.checked值将出现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

Answer 1

两个输入的id都是"long"，所以getElementById可能会返回第一个，即"Yes"按钮。

Answer 2

不能给两个元素相同的"id"值。您可以使用.getElementsByName()来查找一组单选按钮，然后查找选中的按钮，或者给它们两个不同的"id"值（这可能是我要做的）。

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

Answer 3

ID必须是唯一的，因此您的代码将无法正常工作。

如果你从FORM方法来看，单选按钮是一个数组：

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

因此，您可以检查是否像这样选择YES，因为YES是数组中的第一个元素。

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

Answer 4

不能有两个具有相同ID属性的复选框。给他们每个人一个不同的ID，它应该能正常工作。

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

Answer 5

两个单选按钮都有相同的ID，因此它只从getElementById调用中获取第一个。

将代码更改为使用document.getElementsByName("long")，然后循环并检查每一个：

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

未勾选-http://jsfiddle.net/myFhm/没有检查-http://jsfiddle.net/myFhm/1/

Answer 6

两个单选按钮的id相同，名称需要保持不变，但它们必须具有不同的id

试试这个：

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