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

有些问题。

JavaScript基于零索引。您使用i <= r.length运行循环，这意味着您的循环将超出节点列表的边界。它迭代三次，它应该只迭代两次。
if语句在for循环中，它应该在外面，因为它应该只执行一次。

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

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

Answer 2

也许您可以通过更明确的选择＆＃39; -check简化逻辑并替换for循环。此外，请注意，要使用单选按钮的文本标签，要使用文本，因为它是非标准的，并且无法在大多数浏览器中正常使用。

＆＃13;

function validateFn() {
  if (document.querySelectorAll('[name=sex]:checked').length == 0) {
    alert('please select a sex')
  }
}

document.querySelector('[type=button]').addEventListener('click',validateFn, false);

＆＃13;

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

＆＃13;

此代码将选择所有选中 name = sex 的元素。在单选按钮的情况下，这只能是一个或没有。对于此选择查询＆＃34; document.querySelectorAll＆＃34;使用，比getElementByName / Id / ClassName ...退出mor强大，请参阅http://www.w3schools.com/Jsref/met_document_queryselectorall.asp。此外，选择使用＆＃34;伪状态＆＃34;或＆＃34;伪类＆＃34;，见http://www.w3schools.com/css/css_pseudo_classes.asp

javascript中的单选按钮验证错误

2 个答案: