单选按钮验证：javascript

问题描述：

我有一个注册表单，并希望在性别部分单选按钮上添加验证。我的形式是像单选按钮验证：javascript

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

无法找到问题。

看着你的JavaScript控制台，并告诉我们的错误信息，请 – 2013-03-22 17:57:47

它没有显示任何错误......但还没有工作 – likephp 2013-03-22 17:58:48

。在你的单选按钮没有性别标识。 – Vassilis 2013-03-22 17:59:39

答

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

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

你应该使用

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

请详细说明（：告诉OP他/她应该*做些什么 – George 2013-03-22 17:59:50

答

与:checked试试这个：

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

答

既然你这个标记与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>

答

你把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/

编辑：非jQuery的解决方案也很简单，因为querySelectorAll('[name=gender]:checked')工作过。

这真的很有帮助....正常工作 – likephp 2013-03-22 18:05:34

答

没有必要validation.By默认选中一个单选按钮

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

@likephp看到我的代码一次。这里没有必要验证 – 2013-03-22 18:03:53

答

这拨弄可以给你一些想法（没有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

相关推荐