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

JS对CHECKBOX的操作

    博客分类:
  • js
 
阅读更多
/**    
* 全选的所有指定名称的checkbox   
*@state 全选的checkbox的状态   
*@name   表格中的所有checkbox的名称   
*@author fangtf   
*@type void   
*/   
function selectAll(state,name) {   
    var ids = document.getElementsByName(name);   
    for (var i = 0; i < ids.length; i++)    
    {          
            ids[i].checked = state;   
    }   
}   
  
/**    
* 全选的所有指定id名称的同名checkbox   
*@state 全选的checkbox的状态   
*@name   表格中的所有checkbox的名称   
*@name   表格中的所有checkbox的id   
*@author fangtf   
*@type void   
*/   
function selectAllCheckboxByID(state,name,id) {   
    var ids = document.getElementsByName(name);   
    for (var i = 0; i < ids.length; i++)    
    {          
            if(ids[i].id == id)   
            {   
                ids[i].checked = state;   
            }   
               
    }   
}   
  
/**    
* 全选页面上所有的checkbox   
*@state 全选的checkbox的状态   
*@author fangtf   
*@type void   
*/   
function selectAlls(state)    
{   
    var inputs = document.getElementsByTagName("input");   
    for(var i =0;i<inputs.length;i++)   
    {   
        if(inputs[i].type == "checkbox")   
        {   
            inputs[i].checked =state;    
        }   
    }   
  
}   
  
/**   
*得到鼠标所单击的行   
*@type Object   
*/   
function GetRow(oElem) {   
    while (oElem) {   
        if (oElem.tagName.toLowerCase() == "tr" && oElem.parentElement.tagName.toLowerCase() == "tbody") {   
            return oElem;   
        }   
        if (oElem.tagName.toLowerCase() == "table" || oElem.tagName.toLowerCase() == "th") {   
            return false;   
        }   
        oElemoElem = oElem.parentElement;   
    }   
}   
  
/**    
* 全选当前行的checkbox   
*@state 全选的checkbox的状态   
*@author fangtf   
*@type void   
*/   
function selectRowCheckbox(state)   
{   
  var row = GetRow(window.event.srcElement);   
  var cells = row.childNodes;    
  for(var i=0;i<cells.length;i++)   
  {   
      var cell = cells[i].childNodes[0];   
     if(cell.tagName == "INPUT")   
     {   
        cell.checked = state;   
     }   
  }   
}   
  
/**    
*选中指定值的Radio   
*如:有两个radio,   
*第一个的name="ids",value="1"  
*第二个的name="ids",value="2"  
*调用方法selectRadio("ids","1");   
*那么数值为1的Radio将被选中   
*@name radio的名称   
*@value radio的值   
*@author fangtf   
*@type void   
*/   
function selectRadio(name,value) {   
    var radioObject = document.getElementsByName(name);   
    if(value === "")   
    {   
        radioObject[0].checked = true;   
        return;   
    }   
    for (var i = 0; i < radioObject.length; i++)    
    {   
        if(radioObject[i].value == value)   
        {   
            radioObject[i].checked = true;   
            break;   
        }   
           
    }   
}   
  
/**    
*选中指定值的checkbox   
*如:有两个checkbox,   
*第一个的name="ids",value="1"  
*第二个的name="ids",value="2"  
*第三个的name="ids",value="3"  
*调用这个方法selectCheckbox("ids","1,2")那么数值为1,2的checkbox将被选中   
*                   
*@name 要选中的checkbox数组的名称   
*@value 判断时候选中的值   
*@author fangtf   
*@type void   
*/   
function selectCheckbox(name,value) {   
    var checkObject = document.getElementsByName(name);   
    var valuevalues = value.split(",");   
    for(var j = 0; j < values.length; j++)   
    {   
        for (var i = 0; i < checkObject.length; i++)    
        {   
            if(checkObject[i].value == values[j])   
            {   
                checkObject[i].checked = true;   
                break;   
            }   
        }   
    }   
       
}   
  
/**    
*选中指定值的select   
*如:有一个名称为user的select   
*<option value="0"></option>  
*<option value="1"></option>  
*调用这个方法selectOption("user","0")那么选项为0的选项就被选中   
*                  
*@name  String  select的名称   
*@value String  判断时候选中的值   
*@author fangtf   
*@type void   
*/   
function selectOption(name,value)   
{   
    var options = document.getElementsByName(name)[0].options;   
    for (var i = 0; i < options.length; i++)    
    {   
        if(options[i].value === value)   
        {   
            options[i].selected = true;    
            break;   
        }   
    }   
  
}  
分享到:
评论

相关推荐

    JS控制checkboxJS控制checkboxJS控制checkbox

    通过以上介绍,你应该对如何使用JavaScript控制checkbox有了全面的理解。无论是单个操作还是批量处理,亦或是实现特定的交互逻辑,JavaScript都能满足你的需求。在实际项目中,结合CSS和HTML,你可以创建出丰富多样...

    JS操作CheckBox控件

    JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛应用于网页和互联网应用开发,包括操作DOM元素、处理用户交互、实现动态效果等。在本篇内容中,我们将探讨如何使用JavaScript操作ASP.NET中的CheckBox控件,...

    checkBox全选——jscheckBox全选——jscheckBox全选——js

    在JavaScript(JS)中,`checkBox`,也称为复选框,是网页表单中常见的一种元素,用于用户选择一个或多个选项。全选功能在处理多选项时非常实用,比如在一个列表中批量选择所有项目。这个标题和描述虽然重复,但明显...

    用JS修改checkbox的选中状态

    在JavaScript(JS)中,操作HTML元素,包括修改checkbox(复选框)的选中状态,是前端开发中常见的任务。复选框是用户界面中一种允许用户进行多项选择的控件,...了解并熟练掌握这些基本操作对前端开发者来说非常重要。

    c# javascript 操作 checkBox控件

    在C#和JavaScript这两种不同的语言中,对`CheckBox`的操作方法有所不同,但它们在网页交互和后端处理中都扮演着重要角色。 C#主要应用于ASP.NET框架,它是一种服务器端编程语言,用于创建动态网页和Web应用程序。在...

    jquery 对checkbox的操作

    本文将详细探讨如何使用jQuery对checkbox进行操作,这些操作包括选择、取消选择、检查状态以及实现更复杂的交互效果。 一、jQuery选择checkbox 在jQuery中,我们可以使用不同的选择器来选取checkbox元素。例如,`$...

    Asp.net CheckBoxList操作集合

    本篇文章将详细讲解如何进行CheckBoxList的操作,包括获取选中项、实现全选、取消选中以及反选功能,并结合JavaScript进行交互式操作。 首先,我们来了解`CheckBoxList`的基本结构。在ASP.NET中,CheckBoxList控件...

    jQuery 对checkbox的操作

    jQuery 对checkbox的操作

    jstree_checkbox

    "jstree_checkbox"是一个专门用于创建具有复选框功能的权限树结构的JavaScript库。在Web开发中,这样的工具非常实用,特别是在处理用户角色、权限分配或组织结构等需要多级选择和层级关系的场景。它允许用户通过交互...

    javascript实现checkbox多级选择

    在JavaScript编程中,实现Checkbox的...总的来说,JavaScript实现Checkbox的多级选择是一个涉及到DOM操作、事件处理、可能还有数据结构和算法的综合问题。理解并掌握这一技能,对于开发复杂的前端应用是非常重要的。

    JS实现TreeView中Checkbox的控制

    `JS`(JavaScript)作为网页动态交互的主要语言,是实现`TreeView`中`Checkbox`功能的关键。本篇文章将深入探讨如何使用`JS`来实现`TreeView`中`Checkbox`的控制,包括点击父节点时全选子节点,以及点击子节点时保持...

    js tree,checkbox tree

    在JavaScript中实现树形结构,通常会用到一些库或框架,如jQuery、AngularJS、Vue.js等,但这里提到的"js tree"可能是指一个专门用于构建树形视图的独立库,如jstree(https://www.jstree.com/)。jstree是一个功能...

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    使用js判断checkbox是否被选中

    js的一些功能,通过js对checkbox的操作,对select标签的操作

    常用的js全选checkbox按钮的功能

    在JavaScript(JS)中,全选复选框(checkbox)是一项常见的功能,它允许用户一键选择页面上所有的可选项。这个功能广泛应用于数据表格、表单以及任何包含多个选择的界面中,提升用户体验,简化操作流程。在本篇讨论...

    checkbox.js

    而`checkbox.js`文件就是专门针对这种元素进行操作的一个JavaScript库,它提供了全选、全不选以及统计选中个数等功能,极大地提升了用户体验和开发效率。 一、Checkbox.js的核心功能 1. **全选与全不选**:`...

    jQuery操作checkbox并获取选中值

    ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。例如,使用`$('input[type="checkbox"]')`可以选取所有类型的checkbox。如果想要选取特定ID的checkbox,...

    jS checkbox 多选

    在网页开发中,JavaScript(简称JS)是一种常用的脚本语言,用于实现客户端的交互功能。在处理表单数据时,checkbox(复选框)经常被用作用户可以选择多个选项的元素。本文将深入探讨如何使用JavaScript实现checkbox...

    js实现翻页后保持checkbox选中状态的实现方法

    所以checkbox为false。...把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到action中。 每次调用此页面时,首选调用action中的选中的id字符串,然后根据在id字符串的基

    js获得Gridview中选中checkbox行的信息

    在网页开发中,GridView是一种常见的数据展示控件,它用于以表格...在实际项目中,还可以根据具体需求进行优化和扩展,如使用jQuery库简化DOM操作,或者引入MVVM框架(如React或Vue.js)来提高开发效率和代码可维护性。

Global site tag (gtag.js) - Google Analytics