网页中有多组radio具体数目不详，如何判断所有组都选中才允许提交？

p95635746 2011-08-18 06:33:18 


<html>

<body>

<form>

<table border="1">

<tr>

<td><input type="radio" name="i1" value="0">是</td>

<td><input type="radio" name="i1" value="1">否</td>

</tr>



<tr>

<td><input type="radio" name="i2" value="0">是</td>

<td><input type="radio" name="i2" value="1">否</td>

</tr>



<tr>

<td><input type="radio" name="i3" value="0">是</td>

<td><input type="radio" name="i3" value="1">否</td>

</td>

</form>

</body>

</html>

网页中有多组类似上面的radio具体数目不详，现在我想实现的功能是
每组中必须选中一项才允许提交，请问用JS如何实现，谢谢！
...全文
385 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
shun90 2014-03-15
  • 打赏
  • 举报
 回复
要是checkbox、text等类型都有呢，象问卷调查那种，该怎么判断每个题都作了选择啊！本人正学习中。
Abin-2008 2011-12-16
  • 打赏
  • 举报
 回复
謝謝你們提供寫法...thx!!!
乌镇程序员 2011-08-19
  • 打赏
  • 举报
 回复 
<html>

<head>

<script type="text/javascript">

window.onload = function() {

	document.getElementsByTagName('form')[0].onsubmit = function() {

		var obj = this.getElementsByTagName('input');

		var _F = {};

		for(var i = 0; i < obj.length; i ++) {

			if (obj[i].type.toLowerCase() == 'radio') {

				var n = obj[i].name;

				if (typeof(_F[n]) == 'undefined') _F[n] = false;

				if (obj[i].checked) _F[n] = true;

			}

		}

		for(x in _F) {

			if (!_F[x]) {

				alert('每组都要选');

				return false;

			}

		}

		return true;

	}

}

</script>

</head>

<body>

<form>

<table border="1">

<tr>

<td><input type="radio" name="i1" value="0">是</td>

<td><input type="radio" name="i1" value="1">否</td>

</tr>



<tr>

<td><input type="radio" name="i2" value="0">是</td>

<td><input type="radio" name="i2" value="1">否</td>

</tr>



<tr>

<td><input type="radio" name="i3" value="0">是</td>

<td><input type="radio" name="i3" value="1">否</td>

</tr>

</table>

<input type="submit" />

</form>

</body>

</html>
yuxh81 2011-08-19
  • 打赏
  • 举报
 回复
算法：页面中被选中的Radio个数，必需等于Radio组数
p95635746 2011-08-19
  • 打赏
  • 举报
 回复
谢谢大家这么热情，有的贴代码，有的提想法。。。已经可以了，现在可以结贴了。。。
风一样的大叔 2011-08-19
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 theforever 的回复:]
上面错了，忘了分组的问题。
下面改正了，楼主测试看看：

HTML code


<head>
<title>单选按钮验证示例_by_theforever_csdn_net</title>
<script type="text/javascript" charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1……
[/Quote]学习了
最后一个菜鸟 2011-08-19
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 p95635746 的回复:]

我最近在做问卷调查，我举的例子radio都是只有两个选项不算难，实际的问卷是有的是两个选项，有的是三个选项，这岂不是很麻烦。。。
[/Quote]
还是单选吗
MuBeiBei 2011-08-18
  • 打赏
  • 举报
 回复 
<html>

<body>

<form>

<table border="1">

<tr>

<td><input type="radio" name="i1" value="0">是</td>

<td><input type="radio" name="i1" value="1">否</td>

</tr>



<tr>

<td><input type="radio" name="i2" value="0">是</td>

<td><input type="radio" name="i2" value="1">否</td>

</tr>



<tr>

<td><input type="radio" name="i3" value="0">是</td>

<td><input type="radio" name="i3" value="1">否</td>

<td><input type="radio" name="i3" value="2">无</td>

</tr>

</table>

</form>

<input type="button" value="click me" id="btn" />



<script>

	document.getElementById('btn').onclick = function(){

		var trs = document.getElementsByTagName('tr'),

		len = trs.length,count = 0;

		

		for(var i = 0; i < len; i++){

			var inputs = document.getElementsByName('i'+(i+1)),ilen= inputs.length;

			

			for(var j = 0; j < ilen; j++){

				if(inputs[j].checked){

					count++;	

				}	

			}	

		}

		

		if(count == len){

			alert('每项都选了');	

		}else{

			alert('请选择')	

		}

	};

</script>

</body>

</html>



楼主用这个，不管每个选项题有多少选项都OK~·
KK3K2005 2011-08-18
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 p95635746 的回复:]

我最近在做问卷调查，我举的例子radio都是只有两个选项不算难，实际的问卷是有的是两个选项，有的是三个选项，这岂不是很麻烦。。。
[/Quote]

兄弟 2个选项 3个选项 4个选项 N个选项 从处理一个集合的角度来看 有区别吗
p95635746 2011-08-18
  • 打赏
  • 举报
 回复
我最近在做问卷调查，我举的例子radio都是只有两个选项不算难，实际的问卷是有的是两个选项，有的是三个选项，这岂不是很麻烦。。。
p95635746 2011-08-18
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 theforever 的回复:]
一旦用了JQ，偷懒也会成为一种时尚：

HTML code

<head>
<title>单选按钮验证示例_by_theforever_csdn_net</title>
<script type="text/javascript" charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js"><……
[/Quote]
好的，谢谢。。。
碧海情天-赵亮 2011-08-18
  • 打赏
  • 举报
 回复
上面错了，忘了分组的问题。
下面改正了，楼主测试看看：


<head>

<title>单选按钮验证示例_by_theforever_csdn_net</title>

<script type="text/javascript" charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js"></script>

<script type="text/javascript">

$(function() {

    $('#theforever_csdn').click(function(){

      //当每组都只有两个选项的时候。

        if($("input[type=radio]:checked").length==$("input[type=radio]").length/2)

            $('#theforever__csdn').submit(); 

    });

});

</script>

</head>

 <body>

<form id="theforever__csdn">

<table border="1">

<tr>

<td><input type="radio" name="i1" value="0" checked>是</td>

<td><input type="radio" name="i1" value="1">否</td>

</tr>

<tr>

<td><input type="radio" name="i2" value="0">是</td>

<td><input type="radio" name="i2" value="1">否</td>

</tr>

<tr>

<td><input type="radio" name="i3" value="0">是</td>

<td><input type="radio" name="i3" value="1">否</td>

</tr>

<input id="theforever_csdn" type="button" value="提交" />

</form>
碧海情天-赵亮 2011-08-18
  • 打赏
  • 举报
 回复
一旦用了JQ，偷懒也会成为一种时尚：


<head>

<title>单选按钮验证示例_by_theforever_csdn_net</title>

<script type="text/javascript" charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js"></script>

<script type="text/javascript">

$(function() {

	$('#theforever_csdn').click(function(){

		if($("input[type=radio]:checked").length==$("input[type=radio]").length)

			$('#theforever__csdn').submit(); 

	});

});

</script>

</head>

 <body>

<form id="theforever__csdn">

<table border="1">

<tr>

<td><input type="radio" name="i1" value="0" checked>是</td>

<td><input type="radio" name="i1" value="1">否</td>

</tr>

<tr>

<td><input type="radio" name="i2" value="0">是</td>

<td><input type="radio" name="i2" value="1">否</td>

</tr>

<tr>

<td><input type="radio" name="i3" value="0">是</td>

<td><input type="radio" name="i3" value="1">否</td>

</tr>

<input id="theforever_csdn" type="button" value="提交" />

</form>
p95635746 2011-08-18
  • 打赏
  • 举报
 回复
[Quote=引用楼主 p95635746 的回复:]
HTML code

<html>
<body>
<form>
<table border="1">
<tr>
<td><input type="radio" name="i1" value="0">是</td>
<td><input type="radio" name="i1" value="1">否</td>
</tr>

<tr>
<td><input type="r……
[/Quote]
好的，非常感谢。。。我先试试看看
豆虫 2011-08-18
  • 打赏
  • 举报
 回复
下班前写了个土的 楼主可参考
function isCanSubmit(){

   var tags = document.forms[0].getElementsByTagName('input');

for(var i = 0,len = tags.length;i<len;i++){

   var comp = tags[i];

   if(comp.type == 'radio'){

      var radio0 = document.getElementsByName(comp.name)[0];

      var radio1 =document.getElementsByName(comp.name)[1];

      if(radio0.checked != "checked &&  radio1.checked != "checked"){

           return false;

       }

    }

}

return true;



}
uni-app 之组件 入门教程 uniapp在线教程 uni app视频教程
讲解uni-app中如何使用组件，主要讲解了基础组件，表单组件等常用的组件，课程主要是针对uni app组件入门学习者。
web前端-3-HTML标签
5.27 周三 6、列表 1.有序列表ul和无序列表ol 注：<ul><li>…</></>是组合标签，其他标签不允许组合 <li></>是一个容器，可以容纳所有元素 列表自带样式属性 <ul><li>的属性type 拥有的选项 disc 默认是心愿 circ...
多线程编程
出处不详 作者：韩耀旭 一、问题的提出 编写一个耗时的单线程程序： 　　新建一个基于对话框的应用程序SingleThread，在主对话框IDD_SINGLETHREAD_DIALOG添加一个按钮，ID为IDC_SLEEP_SIX_SECOND，标题为“延时6秒”，添加按钮的响应函数，代码如下： void CSingleThreadDlg::OnSleepSixSecond(
VisualStudio开发工具中的C#主流控件属性及事件汇总（菜鸟必备）
C#控件及常用设计整理 1、窗体  1、常用属性  （1）Name属性：用来获取或设置窗体的名称，在应用程序中可通过Name属性来引用窗体。  （2）WindowState属性：用来获取或设置窗体的窗口状态。  取值有三种： Normal （窗体正常显示）、 Minimized（窗体以最小化形式显示）和 Maximized（窗体以最大化形式显示）。  （3）StartPos
PB与各种数据库连接
1.Powerscript语言里的事务处理对象怎么理解PowerBuilder程序与数据库之间传递信息的一个结构变量，共有15个成员.你可以详细列表它的所有成员看看它的组成,PB的应用程序会初始化一个全局的结构体变量,SQLCA,当然你也可以自定义一个自己的事务对象.1DBMSstring所使用的数据库管理系统的名字，如Sybase,Oracle,ODBC。2Database...
JavaScript

87,920

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章