Question

我有一个注册表单，想要在性别部分单选按钮上添加验证。我的表格就像

<form name="formreg" enctype="multipart/form-data" method="post">
     <input type="radio" value="male" name="gender" /> Male<br />
      <input type="radio" value="female" name="gender" /> Female<br />
      <input value="Submit" onclick="return inputval()" type="submit" />
    </form>

我使用下面的脚本但没有正常工作..

<script type="text/javascript">
     function inputval(){
        if(document.getElementById("gender").checked=="false")
        {
            alert("Select at least male or female.");
            return false;
        }   
    }
    </script>

无法找到问题。

Answer 1

你得到的元素是Id，而'gender'是你输入的名字，而不是id。
而不是

<input type="radio" value="male" name="gender" /> Male<br />

你应该使用

<input type="radio" value="male" id="gender" /> Male<br />

Answer 2

由于您使用jquery标记了此内容，因此请使用:checked伪类选择器。

<script type="text/javascript">
function inputval()
{
    if($("form[name='formreg'] input[type='radio']:checked").length != 1)
    {
        alert("Select at least male or female.");
        return false;
    }
}
</script>

Answer 3

使用:checked：

尝试此操作

<script type="text/javascript">
 function inputval(){
    if($(':checked').length < 0)
    {
        alert("Select at least male or female.");
        return false;
    }   
}
</script>

Answer 4

你把jQuery放下了，所以我会用它。 document.getElementById('checked')不存在。即使它确实如此，它也只适用于一个元素。您必须遍历每个[name=gender]元素以查看是否已检查任何元素。 jQuery使这个变得微不足道：

$(".inputval").on('click', function (e) {
    if (!$("[name=gender]:checked").length) {
        alert('something something gender');
        e.preventDefault();
    }
});

http://jsfiddle.net/ExplosionPIlls/s2YfU/

编辑：非{j}解决方案也非常简单，因为querySelectorAll('[name=gender]:checked')也可以。

Answer 5

无需验证。默认选中一个单选按钮

<form name="formreg" enctype="multipart/form-data" method="post">
     <input type="radio" value="male" name="gender" checked="true" /> Male<br />
      <input type="radio" value="female" name="gender" /> Female<br />
      <input value="Submit" onclick="return inputval()" type="submit" />
    </form>

Answer 6

这个小提琴可以给你一些想法（没有jquery）。请注意，我选中了其中一个按钮，这样我就可以告诉您如果选中了一个按钮，它会将anyChecked设置为true。

<form name="formreg" enctype="multipart/form-data" method="post">
    <input type="radio" value="male" name="gender" checked="checked"/>Male
    <br />
    <input type="radio" value="female" name="gender" />Female
    <br />
    <input value="Submit" onclick="return inputval()" type="submit" />
</form>
<div id="output"></div>

var output = document.getElementById("output");
var genderInputs = document.getElementsByName("gender");
var anyChecked = false;

for (var j = 0; j < genderInputs.length; j++) {
    if (genderInputs[j].checked === true) {
        anyChecked = true;
        break;
    }
}

output.textContent = "any checked: " + anyChecked;

http://jsfiddle.net/F8XGU/1/

验证单选按钮：javascript

6 个答案: