`
张玉龙
  • 浏览: 722887 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

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

脚本HTML百度JSPXHTML 
阅读更多 

<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>
分享到：
| jsp导入 js文件
评论
1 楼 MEZboy 2013-05-14  
真全面，感谢分享！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)

    该功能所引发的“的OnClick”事件 代码如下: &lt;html&gt; &lt;head&gt; [removed] function getVote(int) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new ...

    javascript判断单选框或复选框是否选中方法集锦

    判断单选框或复选框是否选中&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input name=”radio1″ type=”radio” value=”test”&gt; &lt;button onClick=”alert&#40;‘单选项’+(document....

    基于JavaScript实现单选框下拉菜单添加文件效果

    单选框： 实现的功能是：（类似平时的性格测试） 先隐藏一部分页面，然后通过点击单选框来显示。 再通过选项的选择-（每个选项有不同的积分）积分的多少来给出评语 演示代码： &lt;html&gt; &lt;head&gt; &lt;...

    js实现动态改变radio状态的方法

    h5的radio是自带选中状态改变的，但是如果自带的状态无法满足自己的需求时，就需要自己去实现。 代码如下： h5部分代码 ...input type=radio name=parent_radio value=0 id=my_data onclick=change()/

    javaScript常用事件

    radio （单选钮） reset buttons（重要按钮） submit buttons（提交按钮） 例如可通过下列按钮激活change()文件： &lt;Form&gt; &lt;Input type="button" Value="" onClick="change()"&gt; 2.onLoad页面加载事件：当页面...

    深入理解javaScript中的事件驱动

    ) 通常用于如下控件：button 按钮对象checkbox 复选框或检查列表 –配合onclick单击事件，通常用于全选效果radio 单选按纽reset 重置按钮submit提交按钮　2、内容改变事件 onchange 如：(&lt;input type=”text” ...

    js使用DOM设置单选按钮、复选框及下拉菜单的方法

    本文实例讲述了js使用DOM设置单选按钮、复选框及下拉菜单的方法。分享给大家供大家参考。具体实现方法如下： 1.设置单选按钮 单选按钮在表单中即&lt;input type=”radio” /&gt;它是一组供用户选择的对象，但每次...

    HTML-CSS群中单选引发的“事件”

    因为死神的一个单选按钮问题，N多人出来扯淡，唉，偶这个菜鸟级人物也出来，混水摸鱼去。一个不小心也摸到了一条。 首先看从baidu中挖出来的一段代码，偶就从这里动手的。 代码如下:[removed] function checkradio...

    浅谈javascript基础之客户端事件驱动

    我们知道，面向对象发展起来后，“一夜之间”，几乎所有的语言都能基于对象了，JavaScript也是基于对象的语言。用户在浏览器上的行为...通常应用在button（按钮对象）、checkbox（复选框）、radio（单选按钮）、reset

    天涯易栈VC++网页操作类

    //设置单选框(radio)选中状态,第一个参数填写第几个单选框(radio)第二个添写是否选中（1为选中，0为未选中） CString GetRadioName(int i);//获取指定索引单选框(radio)元素name(名称) CString GetRadioId(int i);//...

    aframe-gui:A帧VR的图形用户界面组件框架

    由其他组件用于定义onclick行为 gui光标 a-gui游标 游标用于与GUI元素进行交互。 gui按钮 a-gui-button 带文本标签的标准按钮组件 gui-icon-按钮 gui图标按钮 具有图标标签而不是文本的按钮 gui-icon-label-button...

Magicbox
Global site tag (gtag.js) - Google Analytics