Radio单选框OnClick事件的设置[网络收集]

最新推荐文章于 2020-12-08 21:42:48 发布

iteye_20054

最新推荐文章于 2020-12-08 21:42:48 发布

阅读量570

点赞数

文章标签：脚本 HTML 百度 JSP XHTML

本文链接：https://blog.csdn.net/iteye_20054/article/details/82059567

版权



<input type="radio" checked=""onclick="document.getElementById('coursenolimit').style.display='';document.getElementById('courselimit').style.display='none';"value="1" name="studentutype">收费学员

<input type="radio"onclick="document.getElementById('coursenolimit').style.display='none';document.getElementById('courselimit').style.display='';"value="2" name="studentutype">补课学员 <font color="red">*</font>


<div 	id="courselimit"/>
<div 	id="coursenolimit"/>



  <input name="studentutype" type="radio" value="1"
					onclick="window.location.href='s/showstudentCourse.action'"
					checked>开通网络课堂课程</input> 
<input name="studentutype" type="radio" value="2" onclick="window.location.href='s/showRemedialCourse.action'">
开通补课课程</input>


<script>
function getRadio(){
    e = event.srcElement;
     alert("你点击的Radio按钮值为"+e.value);
}
window.onload=function(){
var e=document.getElementsByTagName("input");
for(var i=0;i<e.length;i++){
   if(e[i].type=="radio" && e[i].name=="optype")
   e[i].attachEvent("onclick",getRadio);
}
}
</script>
<input type="radio" value="1" name="optype">投诉
<input type="radio" value="2" name="optype">障碍
<input type="radio" value="3" name="optype">业务
<input type="radio" value="4" name="optype">建议
<input type="radio" value="5" name="optype">咨询
<input type="radio" value="6" name="optype">表扬




<script>
function s_login()
{
targetForm=document.forms[0];
targetForm.action="s_login.action";
} 
function t_login()
{
targetForm=document.forms[0];
targetForm.action="t_login.action";
}
</script>
<form action="s_login" method="post" name="form1">
<input type="radio" name="type" value="学生" onClick="s_login()">学生
<input type="radio" name="type" value="教师" onClick="t_login()">教师
</form>




<form action="a.asp" method="post" name="form1">
<input type="radio" name="pt" value="a" checked onclick=document.form1.action="a.asp">A
<input type="radio" name="pt" value="b" onclick=document.form1.action="b.asp">B
<input type="submit">
</form>




<form name="testform" id="testform" action="other.jsp" method="post">

<input name="test" type="radio"  onClick="testform.submit();" value="1" style="cursor:hand; " />
<input name="test" type="radio"  onClick="testform.submit();" value="2" style="cursor:hand; " /> 


</form>




1 使用java script来实现radio button的选中操作。

（1）在这个例子中radio button和提交按钮需要配合使用，因为它们是共用同一个表单。

资料来源：


http://bbs.blueidea.com/viewthread.php?tid=2889494


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function Foo($form)
return flase;
</script>
</head>
<body>
<form name="form1" onsubmit="return foo(this);"
<input type="radio" name ="radioGroup"/>
<input type="radio" name ="radioGroup"/>
<input type="radio" name ="radioGroup"/>
<input type="radio" name ="radioGroup"/>
<input type="radio" name ="radioGroup"/>
<input type="radio" name ="radioGroup"/>
<input type="submit" />
</form>
</body>
</html>


（2）这个例子比上一个例子稍稍复杂点，但也是使用java脚本语言来实现的。而且这个例子教会了我提示对话框的使用方法，原来只是调用一个函数就可以了。

资料来源：

还是上面那个网址——蓝色理想……


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function foo(f){
 var aInput = f.getElementsByTagName("input");
 for (var i = 0 ; i < aInput.length ; i++ ){
  if(aInput[i].name == "radioGroup" && aInput[i].checked == true){
   alert(aInput[i].value);
   break;
  }
 }
 return false;
}
</script>
</head>
<body>
<form name="form1" onsubmit="return foo(this);">
<input type="radio" value="0" name ="radioGroup"/>
<input type="radio" value="1" name ="radioGroup"/>
<input type="radio" value="2" name ="radioGroup"/>
<input type="radio" value="3" name ="radioGroup"/>
<input type="radio" value="4" name ="radioGroup"/>
<input type="radio" value="5" name ="radioGroup"/>
<input type="submit" />
</form>
</body>
</html>


（3）这个比上面的例子还要复杂，因为对脚本语言了解不多，所以明白的不够透彻，实际并没有使用过，但是觉得不错，先记在这里了。

资料来源：

还是蓝色理想，不过网址不一样了。

http://bbs.blueidea.com/thread-2886507-1-1.html


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
label{
cursor:pointer;
font-size:12px;
margin:0px 2px 0px 0px;
color:#2B86BD;
}
.d0{
margin-bottom:30px;
}
.d0 input{
cursor:pointer;
margin:0px;
padding:0px 2px;
}
</style>
<script language="javascript" type="text/javascript">
var dr=document.getElementsByTagName("div"),i,t="";
function submit1(num,type){
t="";
var dri=dr[num].getElementsByTagName("input");
for(i=0;i<dri.length;i++){
if(dri[i].checked){
if(type==0){
alert(dri[i].value);
break;
}else{
t=t+dri[i].value+";";
}
}
}
if(type==1) alert(t);
}
//ChangeSelect
submit1.allselect=function(){
var drc=dr[1].getElementsByTagName("input");
for(i=0;i<drc.length;i++){
drc[i].checked=true;
}
}
//allNot
submit1.allNot=function(){
var drc=dr[1].getElementsByTagName("input");
for(i=0;i<drc.length;i++){
drc[i].checked=false;
}
}
//reverse
submit1.reverseSelect=function(){
var drc=dr[1].getElementsByTagName("input");
for(i=0;i<drc.length;i++){
if(drc[i].checked){
drc[i].checked=false;
}else{
drc[i].checked=true;
}
}
}
</script>
<title>js获取单选框、复选框的值及操作</title>
</head>
<body>
<div class="d0">
<input type="radio" name="day" id="r0" value="前天"/><label for="r0">前天</label>
<input type="radio" name="day" id="r1" value="昨天"/><label for="r1">昨天</label>
<input type="radio" name="day" id="r2" checked="checked" value="今天"/><label for="r2">今天</label>
<input type="radio" name="day" id="r3" value="明天"/><label for="r3">明天</label>
<input type="radio" name="day" id="r4" value="后天"/><label for="r4">后天</label>
<button type="button" onclick="submit1(0,0)" >提交</button>
</div>
<div>
<input type="checkbox" value="前年"/><label>前年</label>
<input type="checkbox" value="去年"/><label>去年</label>
<input type="checkbox" value="今年"/><label>今年</label>
<input type="checkbox" value="明年"/><label>明年</label>
<input type="checkbox" value="后年"/><label>后年</label>
<button type="button" onclick="submit1(1,1)" >提交</button>
<button type="button" onclick="submit1.allselect()" >全选</button>
<button type="button" onclick="submit1.reverseSelect()" >反选</button>
<button type="button" onclick="submit1.allNot()" >全不选</button>
</div>
</body>
</html>


（4）虽然是脚本语言，但是写的很清晰，一看就明白。本来想借鉴这个思路的，但是无奈对脚本语言的使用实在不够了解，无法存储得到的radio button的值。只是使用中发现java script中竟然不能嵌套java代码，起码我使用的时候是出错的。所以最终不得不采用了下面的jsp方式，但代码更简洁明了了，也许是塞翁失马？

资料来源：

CSDN论坛上的。

http://topic.csdn.net/t/20050301/15/3815431.html


<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">  
  <HTML>  
  <HEAD>  
  <TITLE>   New   Document   </TITLE>  
  <META   NAME="Generator"   CONTENT="EditPlus">  
  <META   NAME="Author"   CONTENT="">  
  <META   NAME="Keywords"   CONTENT="">  
  <META   NAME="Description"   CONTENT="">  
  <Script   laugage="javascript">  
  function   sub(obj)  
  {  
  var   x   =   obj.value;  
  switch   (x)  
  {case   "1":    
  document.all("fo1").submit();  
  case   "2":    
  document.all("fo2").submit();  
  case   "3":    
  document.all("fo3").submit();  
  case   "4":    
  document.all("fo4").submit();  
  case   "5":    
  document.all("fo5").submit();  
  }  
  }  
  </script>  
  </HEAD>  

  <BODY>  
  <form   id=fo1   action="about:blank"   method="get"><input   type="radio"   onclick="sub(this);"   value=1>选择1</form>  
  <form   id=fo2   action="about:blank"   method="get"><input   type="radio"   onclick="sub(this);"   value=2>选择2</form>  
  <form   id=fo3   action="about:blank"   method="get"><input   type="radio"   onclick="sub(this);"   value=3>选择3</form>  
  <form   id=fo4   action="about:blank"   method="get"><input   type="radio"   onclick="sub(this);"   value=4>选择4</form>  
  <form   id=fo5   action="about:blank"   method="get"><input   type="radio"   onclick="sub(this);"   value=5>选择5</form>  
  </BODY>  
  </HTML>


2 使用jsp来实现radio button的选中操作。


<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*,java.util.*" errorPage="" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1.jsp</title>
</head>
<body>
第一题
<form   method="POST"   action="2.jsp">  
<input type="radio" name="name" id="id" onClick="this.form.submit()" value="1">GOOGLE
<input type="radio" name="name" id="id" onClick="this.form.submit()" value="2">百度
<input type="radio" name="name" id="id" onClick="this.form.submit()" value="3">雅虎

</form> 
</body>
</html>