`
张玉龙
  • 浏览: 737176 次
  • 性别: 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  
真全面，感谢分享！
发表评论

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

相关推荐

    弹出单选框示例（android）

    2. 在Activity或Fragment中找到单选框并设置监听器。 3. 使用AlertDialog.Builder创建弹出对话框，并设置布局和按钮事件。 4. 实现各个选项对应的功能，如发送短信、邮件或复制到剪贴板。 这个过程不仅展示了如何...

    美化单选框跟复选框代码

    在网页设计中，表单元素如单选框（Radio）和复选框（Checkbox）是不可或缺的部分，它们用于收集用户的选择或确认信息。然而，原生的HTML表单控件在样式方面通常较为朴素，不满足现代网页设计的美观需求。"美化单选框...

    radio单选.docx

    Radio单选框是网页表单中常见的元素，用于让用户在一组互斥的选项中选择一个。在HTML中，`&lt;input&gt;`标签的`type`属性设置为`radio`即可创建一个单选按钮。本文档中提供了两个示例，分别展示了如何使用JavaScript与...

    layui中使用jquery控制radio选中事件的示例代码

    本篇文章将详细讲解如何在Layui中结合jQuery来控制Radio单选框的选中事件。 首先，Radio按钮在HTML中用于提供一组互斥的选择项，用户只能选择其中一个。在Layui中，我们可以利用其内置的表单模块（form）来处理...

    javascript 单选框，多选框美化代码

    对于单选框，使用 `onclick` 事件触发 `crir.toggleRadioLabel` 函数；对于多选框，则触发 `crir.toggleCheckboxLabel` 函数。 事件监听器的作用是在用户点击时改变标签的状态，从而实现美化效果。初始状态下，如果...

    js获取单选框或复选框值及操作

    单选框也有`type="radio"`属性，但它们通常使用`name`属性来指定一组单选选项，只有一个选项可以被选中。例如： ```html &lt;input type="radio" name="gender" id="male" value="男" /&gt; 男 &lt;input type="radio" name=...

    为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判断单选框或复选框是否选中方法集锦

    在Web开发中，经常需要使用JavaScript来检查表单中的单选框（`&lt;input type="radio"&gt;`）和复选框（`&lt;input type="checkbox"&gt;`）是否被用户选中。这种检查对于确保表单的有效性和完整性至关重要。本文将详细介绍几种...

    js和jquery分别验证单选框、复选框、下拉框

    当按钮被点击时，通过选择器`$(":radio:checked")`直接获取被选中的单选框，如果没有选中的单选框，将会弹出提示。 ```javascript &lt;script src="jquery-1.7.1.min.js"&gt;&lt;/script&gt; $(document).ready(function(){ $...

    JS获取文本框,下拉框,单选框的值的简单实例

    单选框由`&lt;input type="radio"&gt;`定义，它们通过相同的`name`属性实现单选。获取被选中的单选按钮值，可以使用`getElementsByName()`函数，如下所示： ```html &lt;INPUT TYPE="radio" NAME="a" value="1"&gt;...

    zTree 3.5 radio/checkbox自定义树形

    - `radio`：针对单选功能，其下有 `type` 参数，设置为 `'all'` 表示全节点都可选，`'level'` 表示同级节点互斥。 - `data`：数据对象，用于设置节点数据。 - `key`：包含 `checked` 属性，用于控制节点的初始...

    复选框 实现 单选 全选

    例如，在一组复选框中，当一个被选中时，其他所有复选框都会自动取消选中，这实际上是在模仿单选按钮（Radio Button）的行为。在文件的部分代码中，并没有直接体现单选的逻辑，但可以通过修改`callCheck`函数中的...

    js下获得单选框的值的代码

    3. **按钮事件**：`确定" onclick="get_radio_value(myForm.point);"&gt;` 定义了一个按钮，当点击时会调用 `get_radio_value` 函数，并传入名为 `point` 的单选按钮组作为参数。 #### 总结 通过以上代码分析，我们...

    ListView实现单选

    // 设置为单选模式 listView.setAdapter(new SingleChoiceAdapter(this, R.layout.item_list_single_choice, Arrays.asList(items))); ``` 在这个例子中，我们创建了一个`SingleChoiceAdapter`，并在`getView()`...

    radio关联 网页设计

    - 在每个单选按钮上添加了`onclick`属性，将其与`todo`函数关联起来。 - 当用户点击任一单选按钮时，都会触发`todo`函数，从而根据当前选择的值更新文本输入框的可见性。 #### 三、实现技巧与注意事项 - **事件...

    【JavaScript源代码】react实现Radio组件的示例代码.docx

    在React中，创建自定义组件是常见的需求，本示例中展示了如何用JavaScript实现一个Radio（单选框）组件。这个示例分为三个主要部分：`Test`组件、`RadioGroup`组件和`Radio`组件。 1. `Test`组件： 这是整个示例的...

    按钮单选示例demo

    1. **单选框（Radio Button）原理**：在HTML中，`&lt;input type="radio"&gt;`元素用于创建单选按钮。通过设置相同的`name`属性，可以确保同一组中的单选按钮互斥，即一次只能选择一个。 2. **状态管理**：为了跟踪用户的...

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