`
and4walker
  • 浏览: 564952 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于checkbox跟radio的JS函数!

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

相关推荐

    JQuery操作checkbox、radio等示例

    本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...

    jquery实现表单美化特效包括checkbox和radio美化特效插件

    一款非常强大的表单美化插件,点击颜色替换相应的checkbox和radio样式 多个选项来自定义checkbox和radio 8个回调函数支持 6个方法来编程控制 效果详情可参考http://www.xwcms.net/js/bddm/19041.html

    jquery radio checkbox 美化

    使用此类插件,只需引入相关JS和CSS文件,并简单调用插件方法,如`$('input[type="checkbox"]').hCheckbox();`。 四、实现自定义图标 为了进一步提升用户体验,我们可以用图片或图标字体(如Font Awesome)替换...

    JQuery 自定义 radio与checkbox

    jQuery提供了丰富的事件处理函数,如`.click()`, `.change()`, `.focus()`等,可以监听用户对radio和checkbox的操作。例如,当用户点击一个radio按钮时,可以触发一个事件来更新其他同组radio的样式,确保只有一个被...

    js checkbox radio

    在JavaScript中,`checkbox`和`radio`是两种常见的表单元素,用于用户输入选择数据。它们在网页交互中扮演着重要角色。本篇将详细探讨这两种元素的使用方法、特性以及如何通过JavaScript进行操作。 一、Checkbox...

    Koo.js-标签式表单验证及初始化插件及演示支持select,checkbox,radio.zip

    Koo.js 是一个专为前端开发者设计的轻量级插件,它提供了标签式的表单验证功能,并且支持select、checkbox和radio等元素,极大地提升了表单交互的便捷性和用户体验。本文将深入探讨Koo.js的核心特性、使用方法以及...

    radiobutton 控制checkbox多选(js实现)

    ### radiobutton 控制 checkbox 多选 (js 实现) 在 Web 开发中,表单是与用户交互的重要组成部分。为了实现更加灵活的功能,有时我们需要利用 JavaScript 来控制表单元素的状态,例如通过单选按钮(`&lt;input type="...

    radio checkbox

    在网页设计中,"radio"和"checkbox"是两种常见的表单元素,用于用户输入选择。它们在HTML中扮演着重要角色,允许用户进行多选或单选操作。本文将详细探讨如何使用CSS3技术来美化和替代浏览器自带的默认样式,以及一...

    jQuery实现自定义checkbox和radio样式

    我们需要引入 jQuery 库,并编写自定义函数来处理 checkbox 和 radio。以下是一个简单的实现: ```javascript (function($) { $.fn.customInput = function() { this.each(function(i) { var input = $(this)...

    javascript checkbox/radio onchange不能兼容ie8处理办法

    javascript checkbox/radio onchange不能兼容ie8处理办法 在ie8下,checkbox的onchange没能实现触发自定义的函数,如何解决该问题,如下: function forIe(){ if($.browser.msie){ //判断浏览器是否为ie $(input...

    判断Checkbox和Radio的一种方法

    为了响应用户操作,可以添加事件监听器来在Checkbox或Radio的状态改变时执行某些函数。例如,添加`change`事件监听器: ```javascript // 对于Checkbox checkbox.addEventListener("change", function() { console...

    使用jquery与图片美化checkbox和radio控件的代码(打包下载)

    这两个函数分别用于初始化和应用自定义的样式到checkbox和radio控件上。文档还提到了一个按钮的点击事件,用于在用户交互后获取选中的控件值并弹出提示。 文档中还提到,如果用户想要在此基础上对美化效果进行改进...

    jquery iCheck.js实现的自定义复选框checkbox和单选框radio样式插件.zip

    在Web开发中,我们经常需要对用户进行多选或单选操作的交互设计,这时候复选框(checkbox)和单选框(radio)就显得尤为重要。然而,原生HTML的样式相对单一,无法满足设计师和开发者对于界面美观度的需求。为了解决...

    jquery获取各种radio,checkbox,select的值等

    在JavaScript的世界里,jQuery库提供了一种简洁的方式来操作DOM元素,包括处理radio、checkbox和select。这些元素在网页表单中十分常见,用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明: 1. **...

    怎么获取checkbox/select/radio、选择中的text和value值

    在IT领域,特别是前端开发中,获取用户界面元素如`checkbox`、`select`和`radio`的选择状态是一项常见的需求。这些元素常用于收集用户的偏好或输入,因此准确地读取它们的`text`(显示文本)和`value`(实际值)对于...

    input:checkbox多选框实现单选效果跟radio一样

    本问题就是关于如何用 JavaScript(这里使用 jQuery)来改造`checkbox`,使其达到与`radio`一样的单选功能。 首先,我们需要了解`&lt;input type="radio"&gt;`的特性。在默认情况下,同一组内的`radio`按钮,通过设置相同...

    微信小程序单选radio及多选checkbox按钮用法示例

    本文主要介绍的是如何使用单选按钮(radio)和多选按钮(checkbox)这两种常见的表单元素。以下是对标题和描述中提及的知识点的详细说明: 1. **单选按钮(radio)**: 单选按钮在微信小程序中通常用于提供一系列...

    jquery checkbox,radio是否选中的判断代码

    本文将详细介绍如何使用jQuery来判断`checkbox`和`radio`是否被选中。 首先,我们来看`radio`的选择判断。`radio`按钮通常用作一组互斥选项,用户只能选择其中一个。以下是一个简单的jQuery代码片段来判断某个具有...

    JavaScript检查表单是否为空的函数

    本篇文章将详细介绍一个JavaScript函数,该函数可以用于检查表单中的文本框(`&lt;input type="text"&gt;`)是否为空以及检查单选按钮(`&lt;input type="radio"&gt;`)或复选框(`&lt;input type="checkbox"&gt;`)是否被选中。...

Global site tag (gtag.js) - Google Analytics