JS对CHECKBOX的操

本文介绍了一系列用于批量操作网页表单元素的JavaScript函数,包括全选特定名称或ID的复选框、全选表格行内的复选框、选择指定值的单选按钮和下拉选项等,适用于网页开发中对表单进行快速管理和状态设置。

/**      

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值