javascript中的单选按钮验证错误

Question

我有两个单选按钮来选择性别。在JS下方使用，但如果选择了“女性”按钮，则会接受该按钮，但如果选择了“男性”，则表明未选择任何按钮。

var r = document.getElementsByName("sex")
var sex= -1;
for(var i=0; i <= r.length; i++)
    {
         if(r[i].checked)
            {
            sex = i; 
            }
    if (sex == -1)
    { 
        alert("please select gender");
        return false;
    }    
}

我已经为两个电台取了两个div，两个电台都有相同的名字。所以这是我的html来检查是否有问题，

<div style="margin-top:17px; width:92px;float:left;">
   <input id="female" class="radio" type="radio" name="sex" value="female">Female</input>
</div>
<div style="margin-top:17px; width:92px;float:left; margin-bottom:17px;">
   <input class="radio" id="male" type="radio" name="sex" value="male">Male</input>
</div>

Answer 1

也许你可以简化逻辑，用一个更明确的“选中”检查代替for循环。此外，请注意，单选按钮要有可点击的文本标签，要使用文本，因为这是非标准的，在大多数浏览器中无法正常工作。

js prettyprint-override">function validateFn() {
  if (document.querySelectorAll('[name=sex]:checked').length == 0) {
    alert('please select a sex')
  }
}

document.querySelector('[type=button]').addEventListener('click',validateFn, false);

<form>
  <div>
    <input id="female" class="radio" type="radio" name="sex" value="female" />
    <label for="female">Female</label>
  </div>
  <div>
    <input class="radio" id="male" type="radio" name="sex" value="male" />
    <label for="male">Male</label>
  </div>
  <input type="button" value="validate"/>
</form>

Answer 2

这里有一些问题。

• JavaScript是基于零索引的。你用i运行了一个循环

function validate()
{

  var r = document.getElementsByName("sex")

  var sex= -1;
  for(var i=0; i < r.length; i++)
    {
         if(r[i].checked)
         {
            sex = i; 
            break;
         }
    }
    if (sex < 0)
    { 
        alert("please select gender");
        return false;
    }
}

document.querySelector("button").addEventListener("click", validate, false);

html lang-html prettyprint-override"><div style="margin-top:17px; width:92px;float:left;">
   <input id="female" class="radio" type="radio" name="sex" value="female">Female</input>
</div>
<div style="margin-top:17px; width:92px;float:left; margin-bottom:17px;">
   <input class="radio" id="male" type="radio" name="sex" value="male">Male</input>
</div>

<button>Validate</button>