js checkbox radio

因为要兼容firefox和ie,所以在事件处理方面很费了些许时间,因此把心得和大家分享 
一、ie处理事件的机制   
采用事件冒泡策略,事件从最底层的element冒泡到最顶层的window,在事件函数里面获取事件对象 
用全局变量window.event就可以了,非常简单, 

二、firefox的事件的机制   
在firefox中,事件处理过程复杂一些,先采取事件传播机制,从最顶层的window到最底层的element,再冒泡回到最顶层的window 
事件对象是没有全局的,采用参数传到事件处理函数里面,获取方法有两种 
1.默认是事件处理函数的第一个参数,也是唯一的参数,这时,事件的处理函数必须动态添加,不能写到html标记里面 
function   check(aaa) 

        alert(aaa);   

<input   type=text   id= "txt1 "/> 
document.getElementById( "txt1 ").onclick   =   check;

2.可以在事件处理函数中显式的传递名为event的参数,这时事件处理函数写入html标记,并且可以传递自己的参数 
并且不能象上面第一种方式一样动态添加了 
function   check(str1,str2) 

        alert(str1); 
        alert(str2); 

<input   type=text   id= "txt1 "   onclick= "check( '111 ',event) "/>

Java代码  

  1. /**  
  2. * 全选的所有指定名称的checkbox 
  3. *@state 全选的checkbox的状态 
  4. *@name   表格中的所有checkbox的名称 
  5. *@author fangtf 
  6. *@type void 
  7. */  
  8. function selectAll(state,name) {  
  9.     var ids = document.getElementsByName(name);  
  10.     for (var i = 0; i < ids.length; i++)   
  11.     {         
  12.             ids[i].checked = state;  
  13.     }  
  14. }  
  15.   
  16.   
  17. /**  
  18. * 全选的所有指定id名称的同名checkbox 
  19. *@state 全选的checkbox的状态 
  20. *@name   表格中的所有checkbox的名称 
  21. *@name   表格中的所有checkbox的id 
  22. *@author fangtf 
  23. *@type void 
  24. */  
  25. function selectAllCheckboxByID(state,name,id) {  
  26.     var ids = document.getElementsByName(name);  
  27.     for (var i = 0; i < ids.length; i++)   
  28.     {         
  29.             if(ids[i].id == id)  
  30.             {  
  31.                 ids[i].checked = state;  
  32.             }  
  33.               
  34.     }  
  35. }  
  36.   
  37. /**  
  38. * 全选页面上所有的checkbox 
  39. *@state 全选的checkbox的状态 
  40. *@author fangtf 
  41. *@type void 
  42. */  
  43. function selectAlls(state)   
  44. {  
  45.     var inputs = document.getElementsByTagName("input");  
  46.     for(var i =0;i<inputs.length;i++)  
  47.     {  
  48.         if(inputs[i].type == "checkbox")  
  49.         {  
  50.             inputs[i].checked =state;   
  51.         }  
  52.     }  
  53.   
  54. }  
  55.   
  56.   
  57. /** 
  58. *得到鼠标所单击的行 
  59. *@type Object 
  60. */  
  61. function GetRow(oElem) {  
  62.     while (oElem) {  
  63.         if (oElem.tagName.toLowerCase() == "tr" && oElem.parentElement.tagName.toLowerCase() == "tbody") {  
  64.             return oElem;  
  65.         }  
  66.         if (oElem.tagName.toLowerCase() == "table" || oElem.tagName.toLowerCase() == "th") {  
  67.             return false;  
  68.         }  
  69.         oElem = oElem.parentElement;  
  70.     }  
  71. }  
  72.   
  73. /**  
  74. * 全选当前行的checkbox 
  75. *@state 全选的checkbox的状态 
  76. *@author fangtf 
  77. *@type void 
  78. */  
  79. function selectRowCheckbox(state)  
  80. {  
  81.   var row = GetRow(window.event.srcElement);  
  82.   var cells = row.childNodes;   
  83.   for(var i=0;i<cells.length;i++)  
  84.   {  
  85.       var cell = cells[i].childNodes[0];  
  86.      if(cell.tagName == "INPUT")  
  87.      {  
  88.         cell.checked = state;  
  89.      }  
  90.   }  
  91. }  
  92.   
  93. /**  
  94. *选中指定值的Radio 
  95. *如:有两个radio, 
  96. *第一个的name="ids",value="1" 
  97. *第二个的name="ids",value="2" 
  98. *调用方法selectRadio("ids","1"); 
  99. *那么数值为1的Radio将被选中 
  100. *@name radio的名称 
  101. *@value radio的值 
  102. *@author fangtf 
  103. *@type void 
  104. */  
  105. function selectRadio(name,value) {  
  106.     var radioObject = document.getElementsByName(name);  
  107.     if(value === "")  
  108.     {  
  109.         radioObject[0].checked = true;  
  110.         return;  
  111.     }  
  112.     for (var i = 0; i < radioObject.length; i++)   
  113.     {  
  114.         if(radioObject[i].value == value)  
  115.         {  
  116.             radioObject[i].checked = true;  
  117.             break;  
  118.         }  
  119.           
  120.     }  
  121. }  
  122.   
  123.   
  124. /**  
  125. *选中指定值的checkbox 
  126. *如:有两个checkbox, 
  127. *第一个的name="ids",value="1" 
  128. *第二个的name="ids",value="2" 
  129. *第三个的name="ids",value="3" 
  130. *调用这个方法selectCheckbox("ids","1,2")那么数值为1,2的checkbox将被选中 
  131. *                 
  132. *@name 要选中的checkbox数组的名称 
  133. *@value 判断时候选中的值 
  134. *@author fangtf 
  135. *@type void 
  136. */  
  137. function selectCheckbox(name,value) {  
  138.     var checkObject = document.getElementsByName(name);  
  139.     var values = value.split(",");  
  140.     for(var j = 0; j < values.length; j++)  
  141.     {  
  142.         for (var i = 0; i < checkObject.length; i++)   
  143.         {  
  144.             if(checkObject[i].value == values[j])  
  145.             {  
  146.                 checkObject[i].checked = true;  
  147.                 break;  
  148.             }  
  149.         }  
  150.     }  
  151.       
  152. }  
  153.   
  154. /**  
  155. *选中指定值的select 
  156. *如:有一个名称为user的select 
  157. *<option value="0"></option> 
  158. *<option value="1"></option> 
  159. *调用这个方法selectOption("user","0")那么选项为0的选项就被选中 
  160. *                
  161. *@name  String  select的名称 
  162. *@value String  判断时候选中的值 
  163. *@author fangtf 
  164. *@type void 
  165. */  
  166. function selectOption(name,value)  
  167. {  
  168.      document.getElementsByName(name)[0].value=value;  
  169.   
  170. }  

 

时间: 2024-11-04 21:22:54

js checkbox radio的相关文章

比较全的JS checkbox全选、取消全选、删除功能代码_javascript技巧

看下面两种实现方法: JS checkbox 方法一: 复制代码 代码如下: function checkAll() { var code_Values = document.all['code_Value']; if(code_Values.length){ for(var i=0;i<code_Values.length;i++) { code_Values[i].checked = true; } }else{ code_Values.checked = true; } } functio

jquery的checkbox,radio,select等方法小结_jquery

1.checkbox日常jquery操作. 现在我们以下面的html为例进行checkbox的操作. <input id="checkAll" type="checkbox" />全选 <input name="subBox" type="checkbox" />项1 <input name="subBox" type="checkbox" />项2

jquery对checkbox,radio,select操作方法总结

jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻.时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对其做一些简单的总结! 1.checkbox日常jquery操作. 现在我们以下面的html为例进行checkbox的操作. <input id="checkAll" type="checkbox" />全选         <input name=&q

js 获取radio按钮值的实例_javascript技巧

复制代码 代码如下: <!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="

网页中怎么实现checkbox&amp;radio对齐的教程

不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样. 重置 form checkbox & radio 因为不同浏览器解析不一样,有些是默认margin,有些是默认padding,还有ie6,7连margin和padding即使设置为0后,所占的空间还是比较大,所以还是有必须重置下,这样就能解决很多不必要的麻烦. 以下是 14px Arial 字体的解决方案: 1.css代码 .form {font:14px/18pxArial,Helvetica,sans-serif; } .for

js检测Radio单选框被选中项

为了准确无误的提交表单,在提交前都会对表单的各个项目进行验证,今天带来的是使用JavaScript进行Radio验证,判断多个单选框中,哪一个被选中了,或者说是取出其值,以下为HTML代码,含Js部分:    代码如下 复制代码 <HTML> <script language="vbscript"> function checkme() for each ob in radio1 if ob.checked then window.alert ob.value

js 获取radio的值

其实js 获取radio的值是很简单的,如果是单选按钮组的话就遍历一次就行了,如果是单选的就直接判断.value就行了. <!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/xh

jQuery遍历和操作表单元素Select,checkbox,radio

 jQuery获取Select选择的Text和Value: 语法解释:  代码如下 复制代码     1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发     2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text     3. var c

LazyForm jQuery plugin 定制您的CheckBox Radio和Select_jquery

在下面浏览器下测试通过:Firefox, IE7, IE8, Google浏览器. (IE6还是算了吧),其它浏览器还没试过. 目前刚添加了4个皮肤,添加新皮肤非常方便,您可以参考已添加的皮肤图片和css代码,相信您会很快搞定. 效果截图: 一.在没有使用LazyForm的情况下,在XP下运行截图如下 二.使用LazyForm(皮肤Blue)效果如下三.使用LazyForm(皮肤Black)效果如下四.皮肤Default五.皮肤Graydemo.html代码如下: 复制代码 代码如下: <!DO