<html>
<head>
<title>test</title>
<script>
function onsubmitTest() {
var flage = false;
var radios = document.forms[0].radio1;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked == true) {
flage = true;
alert("选择了第" + i + "个单选按钮");
return true;
}
}
if (!flage) {
alert("一个单选按钮都没有选择！");
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="get" action="#" onsubmit='onsubmitTest();'>
<input type="radio" name="radio1" value="1" id="radio1"><label for='radio1'>单选按钮一</label>
<input type="radio" name="radio1" value="2" id="radio2"><label for='radio2'>单选按钮二</label>
<input type="radio" name="radio1" value="3" id="radio3"><label for='radio3'>单选按钮三</label>
<input type="submit" />
</form>
</body>
</html>
修改以后
<html>
<head>
<title>test</title>
<script>
function onsubmitTest() {
var flage = false;
var radios = document.forms[0].radio1;
// 没有单选按钮的情况
if (typeof radios == 'undefined') {
alert("一个单选按钮都没有！");
}
// 只有一个单选按钮的情况
if (typeof radios.length == 'undefined') {
alert("只有一个单选按钮。");
if (document.forms[0].radio1.checked == true) {
alert("只有一个按钮，已选中");
return true;
} else {
alert("只有一个按钮，没有选中");
return false;
}
} else { // 多于一个单选按钮的情况
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked == true) {
flage = true;
alert("选择了第" + (parseInt(i) + 1) + "个单选按钮");
return true;
}
}
}
if (!flage) {
alert("一个单选按钮都没有被选中！");
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="get" action="#" onsubmit='onsubmitTest();'>
<input type="radio" name="radio1" value="1" id="radio1"><label for='radio1'>单选按钮一</label>
<input type="radio" name="radio1" value="2" id="radio2"><label for='radio2'>单选按钮二</label>
<input type="radio" name="radio1" value="3" id="radio3"><label for='radio3'>单选按钮三</label>
<input type="submit" />
</form>
</body>
</html>
分享到：
相关推荐
js控制单选按钮(radio)的取消与选中，javascript单选按钮
取消单选按钮选中并判断对象是否为空，在项目中也是比较常见的，下面有个不错的示例，感兴趣的朋友可以参考下
CSS3单选按钮和复选按钮特效是一款经过美化的CSS3按钮样式代码。
利用js，html5，SVG动画画笔风格的复选框选中样式和单选按钮选中样式
$(function(){ $("input:radio").click(function () { //获取选中的radio的值 if($(this).attr("checked")){ var contactUserId = $(this).val(); alert(contactUserId ); } }); }); </script>
本文提供了三种取消选中radio的方式，代码示例如下: 本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第...单选按钮取消选中的三种方式</title> [removed] [removed] [removed] $(function(){ // v
jQuery单选多选按钮选中美化特效是一款基于jQuery CSS3实现的表单美化特效。
本文实例讲述了js使用DOM设置单选按钮、复选框及下拉菜单的方法。分享给大家供大家参考。具体实现方法如下： 1.设置单选按钮 单选按钮在表单中即<input type=”radio” />它是一组供用户选择的对象，但每次...
本文实例讲述了js简单获取表单中单选按钮值的方法。分享给大家供大家参考，具体如下： HTML部分如下： <form> bordercolor=#999999>回退类型:</span></td> ...
单选按钮，双击取消选中 A: B: C: D: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
取消单选按钮选中的方法有很多，下面为大家详细介绍下使用js是如何实现的，感兴趣的朋友不要错过
js html5 SVG动画画笔风格的复选框选中样式和单选按钮选 js html5 SVG动画画笔风格的复选框选中样式和单选按钮选
ValidateRadioButton 验证是否已使用JAVASCRIPT选中了所有组的单选按钮。 验证所有单选按钮组均标记有JavaScript
iCheck自定义复选框和单选按钮组件（jQuery)，它避免在日常开发中重复造轮子，在数量庞大的浏览器，设备和它们的不同版本中，它提供了风格一致的外观。回调和方法可以用来方便地处理修改和自定义输入。兼容主流...
本文提供了三种取消选中radio的方式，代码示例如下: 本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现...单选按钮取消选中的三种方式</title> [removed] [removed] [removed] $(function(){ // var $br