一组checkbox允许并且必须选择其中的两个?

kuaising 2008-01-10 01:42:49
一组checkbox, 如何只让选择其中的2个,并且是必选2个?
谢谢.
...全文
515 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
kuaising 2008-01-11
  • 打赏
  • 举报
 回复 
function checkform(arg){

	var els = document.form.elements;

	for(var i=arg;i<els.length;i++){

		switch(els[i].name){

			case "a3":

			if(document.form.a3.options.value.length < 1){

				alert("请选择所在区域！");

				window.location.href = "#a3";

				return false;

			};

			break;

			case "a4text":

			if(selectother("a4id","a4text") == 0){

				alert("请输入其他项内容！");

				window.location.href = "#a4text";

				return false;

			};

			break;

			case "a6text":

			if(selectother("a6id","a6text") == 0){

				alert("请输入其他项内容！");

				window.location.href = "#a6text";

				return false;

			};

			break;

			case "a7text":

			if(selectother("a7id","a7text") == 0){

				alert("请输入其他项内容！");

				window.location.href = "#a7text";

				return false;

			};

			break;

			case "a8text":

			if(selectother("a8id","a8text") == 0){

				alert("请输入其他项内容！");

				window.location.href = "#a8text";

				return false;

			};

			break;

			case "a9text":

			if(selectother("a9id","a9text") == 0){

				alert("请输入其他项内容！");

				window.location.href = "#a9text";

				return false;

			};

			break;

			case "a11text":

			if(selectother("a11id","a11text") == 0){

				alert("请输入其他项内容！");

				window.location.href = "#a11text";

				return false;

			};

			break;

			case "b19text":

			if(selectother("b19id","b19text") == 0){

				alert("请输入其他项内容！");

				window.location.href = "#b19text";

				return false;

			};

			break;

			case "d1text":

			if(selectother("d1id","d1text") == 0){

				alert("请输入其他项内容！");

				window.location.href = "#d1text";

				return false;

			};

			break;

			case "d2text":

			if(selectother("d2id","d2text") == 0){

				alert("请输入其他项内容！");

				window.location.href = "#d2text";

				return false;

			};

			break;

			case "a15":

			if(select2("a15") != 2){

				alert("请选择两项答案！");

				window.location.href = "#a15";

				return false;

			};

			break;

			case "c3":

			if(select2("c3") != 2){

				alert("请选择两项答案！");

				window.location.href = "#c3";

				return false;

			};

			break;

			case "c10":

			if(mulselother("c10mtext","c10") == 0){

				alert("请答完所有的题！");

				window.location.href = "#c10";

				return false;

			}

			break;

			case "e3":

			if(mulselother("e3mtext","e3") == 0){

				alert("请答完所有的题！");

				window.location.href = "#e3";

				return false;

			}

			break;

			case "f2":

			if(mulselother("f2mtext","f2") == 0){

				alert("请答完所有的题！");

				window.location.href = "#f2";

				return false;

			}

			break;

			case "g2":

			break;

			case "g3":

			break;

			case "submit":

			break;

			default:

			if(check_els(els[i]) == 0){

				alert("请答完所有的题!");

				window.location.href='#'+ els[i].name;

				return false;

			};

			break;

		}

	}

};



function selectother(arg1,arg2){

	var els1=document.getElementById(arg1);

	if(els1.checked){

		var els2 = document.getElementsByName(arg2);

		var len = els2[0].value.length;

		if(len < 1){

			return 0;

		}

		else{

			return len;

		}

	}

	else{

		return 1;

	}

};



function select2(arg1){

	var num = 0;

	var els2 = document.getElementsByName(arg1);

	for(var k=0;k<els2.length;k++){

		if(els2[k].checked){

			++num;

		}

	};

	return num;

};



function mulselother(arg1,arg2){

	var els1 = document.getElementById(arg1);

	var len = els1.value.length;

	if(len > 0){

		return len;

	}

	else{

		var num = 0;

		var tmpels = document.getElementsByName(arg2);

		for(var k=0;k<tmpels.length;k++){

			if(tmpels[k].checked){

				++num;

			}

		}

		return num;

	}

};



function check_els(el){

	var sType = el.type;

	switch(sType){

		case "hidden":

		return 1;

		break;

		default:

		var tmpels = document.getElementsByName(el.name);

		var num = 0;

		for(var k=0;k<tmpels.length;k++){

			if(tmpels[k].checked){

				++num;

			}

		}

		return num;

	}

};


这是我最终的代码。
感谢给予帮助的朋友！
toury 2008-01-10
  • 打赏
  • 举报
 回复
13楼问题:
//-------------------检查第二部分
if(cal("r2")==0){
alert("请选择第二部分答案!"); window.location.href='#S2'; return false;
}
else{
if (document.getElementsByName("r2")[2].checked){
if (document.getElementById("t2").value==""){
alert("请填写第二部分中的[其他]!"); window.location.href='#S2'; return false;
}
}
}
==========================
<a name=S2>
<div id=S2>
2)一组radio + 一项"其他"选项,"其他"选项用text让手工输入;<br>
<%
for i=1 to 3
if i=3 then
Response.Write "<input type=radio id=r2 name=r2>问题2-"&i&"其他<input type=text id=t2 name=t2>问题2-"&i
else
Response.Write "<input type=radio id=r2 name=r2>问题2-"&i&"<br>"
end if
next
%>
</div></a>
kuaising 2008-01-10
  • 打赏
  • 举报
 回复
一个if语句里的条件过长,用DW自动另起行了,但是执行出错,如何续行呢?
kuaising 2008-01-10
  • 打赏
  • 举报
 回复 
function allans(){

	var els = document.form.elements;

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

		if(check_els(els[i]) == 0){

			alert("请答完所有的题！")

			return false;

			break;

		}	

	}

};



function check_els(el){

	var tmpels = document.getElementsByName(el.name);

	var num = 0;

	for(var k=0;k<tmpels.length;k++){

		if(tmpels[k].value.length > 0){

			++num;

		}

		return num;

	}

};

这是我的代码, 不知道是否正确?
kuaising 2008-01-10
  • 打赏
  • 举报
 回复
非常感谢!!
2)一组radio + 一项"其他"选项,"其他"选项用text让手工输入;
这题还有点问题, 就是"其他"的内容应该算一项radio,输入了"其他",前面的radio就不能选了,反之不能选"radio".

另外还有个小问题:
window.location.href='#S4'
这里面的#s4可以用变量-elements.name吗?
toury 2008-01-10
  • 打赏
  • 举报
 回复
忘了加出现提示后让页面滚动到相应部分的题上;看这个吧:


<SCRIPT LANGUAGE=javascript>

<!--

function chk() { 

  //-------------------检查第一部分

  if(cal("r1")==0){ 

    alert("请选择第一部分答案!");    window.location.href='#S1';     return false;

  }

  

  //-------------------检查第二部分  

  if(cal("r2")==0){ 

    alert("请选择第二部分答案!");    window.location.href='#S2';     return false;

  }

  if (document.getElementById("t2").value==""){

    alert("请填写第二部分中的[其他]!");   window.location.href='#S2';     return false;

  }

  

  //-------------------检查第三部分

  if(cal("c3")==0){ 

    alert("请选择第三部分中至少一个答案!");    window.location.href='#S3';     return false;

  }

  //-------------------检查第四部分

  if(cal("c4")==0){ 

    alert("请选择第四部分中至少一个答案!");    window.location.href='#S4';     return false; 

    return false;

  }

  

  if (document.getElementById("t4").value==""){

    alert("请填写第四部分中的[其他]!!");    window.location.href='#S4';     return false;

  }

    

  //-------------------检查第五部分

  if(cal("c5")!=2){ 

    alert("第五部分中必须选择其中的2个答案!!");    window.location.href='#S5';     return false; 

  }

} 

function cal(s){

  var c = document.getElementsByName(s); 

  var num=0;   

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

    if (c[i].checked){++num;} 

  }

  return num   

}     

//-->

</SCRIPT>

<form method=post action="xxx.asp" name=frm onsubmit='javascript:return chk()'>

<a name=S1>

<div id=S1>

1)全部是radio<br>

<%

for i=1 to 3

  Response.Write "<input type=radio id=r1 name=r1>问题1-"&i&"<br>"

next

%>

</div></a>

<hr>

<a name=S2>

<div id=S2>

2)一组radio   +   一项"其他"选项,"其他"选项用text让手工输入;<br>

<%

for i=1 to 3

  if i=3 then

    Response.Write "其他<input type=text id=t2 name=t2>问题2-"&i

  else

    Response.Write "<input type=radio id=r2 name=r2>问题2-"&i&"<br>"

  end if

next

%>

</div></a>

<hr>

<a name=S3>

<div id=S3>

3)全部是checkbox;<br>

<%

for i=1 to 3

  Response.Write "<input type=checkbox id=c3 name=c3>问题3-"&i

next

%>

</div></a>

<hr>

<a name=S4>

<div id=S4>

4)一组checkbox   +   一项"其他"选项,"其他"选项用text让手工输入;<br>

<%

for i=1 to 3

  if i=3 then

    Response.Write "其他<input type=text id=t4 name=t4>问题2-"&i

  else

    Response.Write "<input type=checkbox id=c4 name=c4>问题4-"&i&"<br>"

  end if

next

%>

</div></a>

<hr>

<a name=S5>

<div id=S5>

5)全部是checkbox,   只让并且必须选2项;<br>

<%

for i=1 to 3

  Response.Write "<input type=checkbox id=c5 name=c5>问题5-"&i&"<br>"

next

%>

</div>

</a>

<input type=submit id=b name=b value='提交' onclick="javascript:return chk();">

</form>
toury 2008-01-10
  • 打赏
  • 举报
 回复 


<SCRIPT LANGUAGE=javascript>

<!--

function chk() { 

  //-------------------检查第一部分

  if(cal("r1")==0){ 

    alert("请选择第一部分答案!"); 

    return false;

  }

  

  //-------------------检查第二部分  

  if(cal("r2")==0){ 

    alert("请选择第二部分答案!"); 

    return false;

  }

  if (document.getElementById("t2").value==""){

    alert("请填写第二部分中的[其他]!");   return false;

  }

  

  //-------------------检查第三部分

  if(cal("c3")==0){ 

    alert("请选择第三部分中至少一个答案!"); 

    return false;

  }

  //-------------------检查第四部分

  if(cal("c4")==0){ 

    alert("请选择第四部分中至少一个答案!"); 

    return false;

  }

  

  if (document.getElementById("t4").value==""){

    alert("请填写第四部分中的[其他]!!");   return false;

  }

    

  //-------------------检查第五部分

  if(cal("c5")!=2){ 

    alert("第五部分中必须选择其中的2个答案!!"); 

    return false;

  }

} 

function cal(s){

  var c = document.getElementsByName(s); 

  var num=0;   

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

    if (c[i].checked){++num;} 

  }

  return num   

}     

//-->

</SCRIPT>

<form method=post action="xxx.asp" name=frm onsubmit='javascript:return chk()'>

<div id=S1>

1)全部是radio<br>

<%

for i=1 to 3

  Response.Write "<input type=radio id=r1 name=r1>问题1-"&i&"<br>"

next

%>

</div>

<hr>

<div id=S2>

2)一组radio   +   一项"其他"选项,"其他"选项用text让手工输入;<br>

<%

for i=1 to 3

  if i=3 then

    Response.Write "其他<input type=text id=t2 name=t2>问题2-"&i

  else

    Response.Write "<input type=radio id=r2 name=r2>问题2-"&i&"<br>"

  end if

next

%>

</div>

<hr>

<div id=S3>

3)全部是checkbox;<br>

<%

for i=1 to 3

  Response.Write "<input type=checkbox id=c3 name=c3>问题3-"&i

next

%>

</div>

<hr>

<div id=S4>

4)一组checkbox   +   一项"其他"选项,"其他"选项用text让手工输入;<br>

<%

for i=1 to 3

  if i=3 then

    Response.Write "其他<input type=text id=t4 name=t4>问题2-"&i

  else

    Response.Write "<input type=checkbox id=c4 name=c4>问题4-"&i&"<br>"

  end if

next

%>

</div>

<hr>

<div id=S5>

5)全部是checkbox,   只让并且必须选2项;<br>

<%

for i=1 to 3

  Response.Write "<input type=checkbox id=c5 name=c5>问题5-"&i&"<br>"

next

%>

</div>



<input type=submit id=b name=b value='提交' onclick="javascript:return chk();">

</form>
kuaising 2008-01-10
  • 打赏
  • 举报
 回复
最好能让页面滚动到没回答的题上..
kuaising 2008-01-10
  • 打赏
  • 举报
 回复
没写过javascript, 还是不太会..
现在要实现这样的功能:

有一份问卷调查,好几页,所以要用通用函数,
题型有:
1)全部是radio的, 选项3-5个不等;
2)一组radio + 一项"其他"选项,"其他"选项用text让手工输入;
3)全部是checkbox;
4)一组checkbox + 一项"其他"选项,"其他"选项用text让手工输入;
5)全部是checkbox, 只让并且必须选2项;

现在要在提交表单的时候, 检查是否每道题都答了,怎么实现呢?
大家帮忙看看..结贴时会多给分的..
非常感谢!
toury 2008-01-10
  • 打赏
  • 举报
 回复
6楼有小问题,改一下


<SCRIPT LANGUAGE=javascript>

<!--

function chk() { 

  var c = document.getElementsByName("aaa"); 

  var num=0;   

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

    if (c[i].checked){++num;} 

  }   

  

  if(num==2){ 

    if (c[4].checked){

      if (document.getElementById("ttt").value==""){

         alert("请填写其他选项!");   return false;

      }

      else{alert("合格");}

    }

    else{alert("合格");}

  } 

  else{ 

    alert("只能选择其中的2个,且必须选2个"); 

    return false;

  }

}      

//-->

</SCRIPT>



<%

for i=0 to 4

  if i=4 then

    Response.Write "<input type=checkbox id='aaa' name='aaa'>其他选项<input type='text' id='ttt' name='ttt'><br>"

  else

    Response.Write "<input type=checkbox id='aaa' name='aaa'>问题"&i+1&"<br>"

  end if

next



%>

<BR>

<input type=button id=b name=b value='检查' onclick="javascript:return chk();">
yixianggao 2008-01-10
  • 打赏
  • 举报
 回复
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>dhtml.checkbox.multipleSelected.html</title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

</head>

<body>

    <input type="checkbox" name="myGroup" id="cbx1" /><label for="cbx1">选项 1</label>

    <input type="checkbox" name="myGroup" id="cbx2" /><label for="cbx2">选项 2</label>

    <input type="checkbox" name="myGroup" id="cbx3" /><label for="cbx3">选项 3</label>

    <input type="checkbox" name="myGroup" id="cbx4" /><label for="cbx4">选项 4</label>

    <input type="checkbox" name="myGroup" id="cbx5" /><label for="cbx5">选项 5</label>

    <input type="button" id="btnOK" value="OK" />

</body>

<script type="text/javascript">

<!--



Array.prototype.indexOf = function(target)

{

    var result = -1;



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

    {

        if (this[i] == target)

        {

            result = i;

            break;

        }

    }



    return result;

};



function selectItem()

{

    if (this.checked)

    {

        if (aCounter.length == iMax)

        {

            var lastItem = document.getElementById(aCounter.pop());

            lastItem.checked = false;

        }

        aCounter[aCounter.length] = this.id;

    }

    else

    {

        var index = aCounter.indexOf(this.id);

        aCounter.splice(index, 1);

    }



    //alert(aCounter);

}



var iMax = 2;

var aCounter = new Array();

var cGroup = document.getElementsByName("myGroup");

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

{

    cGroup[i].onclick = selectItem;

}



var oBtn = document.getElementById("btnOK");

oBtn.onclick = function()

{

    if (aCounter.length == iMax)

    {

        alert("您选择了" + aCounter);

    }

    else

    {

        alert("请至少选择两项，谢谢！");

    }

};

//-->

</script>

</html>
toury 2008-01-10
  • 打赏
  • 举报
 回复 


<SCRIPT LANGUAGE=javascript>

<!--

function chk() { 

  var c = document.getElementsByName("aaa"); 

  var num=0;   

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

    if (c[i].checked){++num;} 

  }   

  

  if(num==2){ 

    if (document.getElementById("ttt").value==""){

      alert("请填写其他选项!");   return false;

    }

    else{alert("合格");}

  } 

  else{ 

    alert("只能选择其中的2个,且必须选2个"); 

    return false;

  }

}      

//-->

</SCRIPT>



<%

for i=0 to 4

  Response.Write "<input type=checkbox id='aaa' name='aaa'>问题"&i+1&"<br>"

  if i=4 then

    Response.Write "<input type=checkbox id='aaa' name='aaa'>其他选项<input type='text' id='ttt' name='ttt'><br>"

  end if

next



%>

<BR>

<input type=button id=b name=b value='检查' onclick="javascript:return chk();">
kuaising 2008-01-10
  • 打赏
  • 举报
 回复
另外, 这组checkbox中, 有一个选项是一个text块(其他选项),这样也要一起加进去判断,怎么写代码?
rjzou2006 2008-01-10
  • 打赏
  • 举报
 回复
上面好像只是作了一个检查而已.
kuaising 2008-01-10
  • 打赏
  • 举报
 回复
谢谢, 我试一下.
大正他爹 2008-01-10
  • 打赏
  • 举报
 回复
楼上说的对。
toury 2008-01-10
  • 打赏
  • 举报
 回复 


<SCRIPT LANGUAGE=javascript>

<!--

function chk() { 

  var c = document.getElementsByName("aaa"); 

  var num=0;   

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

    if (c[i].checked){   

      ++num;   

    } 

  }   

  

  if(num==2){ 

    alert("合格"); 

  } 

  else{ 

    alert("只能选择其中的2个,且必须选2个"); 

  }

}      

//-->

</SCRIPT>



<%

for i=0 to 4

  Response.Write "<input type=checkbox id='aaa' name='aaa'><br>"

next

%>

<input type=button id=b name=b value='检查' onclick="javascript:void chk();">
Vue+Uni-app(uniapp)入门与实战+赠送仿美团点餐小程序
本课程讲了Vue3+Vue2+Uni-app(uniapp)入门基础与实战，其中还重点讲解了ES6、TypeScript这些基础知识，实战由两大价值5000元的真实企业级项目组成，分别是仿京东电商网站和仿美团微信点餐小程序，同时两大项目代码...
如何让checkbox只允许选择一个
如何让checkbox只允许选择一个
Android 复选框CheckBox 设置只能选中其中一个
使用CheckBox控件，可以使用setChecked方法设置控件是否选中，如果其中一个选中，则设置其他CheckBox控件不可以被选中，设置为false. 代码如下： package com.example.checkboxdemo; import androidx.appcompat.app...
AntD checkbox，限制选中数量
checkbox多选框最多选中两个，选中两个后其余选项置灰；取消一个或两个选项后，所有项可选。 在网上找了一下，有这个需求但是没有实现，于是这里重写了一下，方便以后使用。 操作 1、选中一个选项 2、选中两个选项...
E8-控制一组CheckBox的单选
之前分享过两个CheckBox控制只允许选一个的博文。老话说，量变可能产生质变。最近画了个流程里，需要控制多个CheckBox只允许选一个。用上面博文里讲到的方法能解决，但是要写很多冗余代码。于是决定尝试换一种方法来...
JavaScript

87,910

社区成员

224,616

社区内容

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

加载中

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

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

+ 用AI写文章