`
honeyao
  • 浏览: 74538 次
  • 性别: Icon_minigender_1
  • 来自: ShenZhen
社区版块
存档分类
最新评论

JS 操作 checkbox

J# 
阅读更多
/**          
* 全选的所有指定名称的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     
    {           
        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     
  {           
      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         
*        
*        
*调用这个方法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操作CheckBox控件

    在本篇内容中,我们将探讨如何使用JavaScript操作ASP.NET中的CheckBox控件,实现特定的功能。 首先,ASP.NET中的CheckBox控件是一种允许用户进行二选一(是/否)选择的UI元素。在提供的代码片段中,DataGrid控件...

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

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

    c# javascript 操作 checkBox控件

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

    用JS修改checkbox的选中状态

    在JavaScript(JS)中,操作HTML元素,包括修改checkbox(复选框)的选中状态,是前端开发中常见的任务。复选框是用户界面中一种允许用户进行多项选择的控件,其状态通常有两种:选中(checked)和未选中。在本文中...

    JS控制checkboxJS控制checkboxJS控制checkbox

    在网页开发中,JavaScript(JS)是一种至关重要的脚本语言,用于实现客户端的交互效果。在HTML表单中,`checkbox`元素常用于提供多选选项。本文将深入探讨如何使用JavaScript来控制checkbox的行为,包括选择、取消...

    IE7中javascript操作CheckBox的checked=true不打勾的解决方法

    总的来说,解决IE7中JavaScript操作Checkbox的`checked=true`不打勾的问题,关键在于理解DOM操作的顺序和浏览器的差异性。通过调整代码逻辑,确保元素在DOM中的正确位置再进行属性设置,可以有效地避免此类兼容性...

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

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

    checkbox多项选中及取消选中

    3. **JavaScript操作Checkbox**: 使用JavaScript,我们可以动态地改变 `checkbox` 的状态。例如,通过 `document.getElementById('option1').checked = true` 可以选中 "Option 1",而 `false` 将取消选中。 4. *...

    jquery、js操作checkbox全选反选

    以上就是使用 jQuery 和 JavaScript 操作 checkbox 全选和反选的基本方法。在实际应用中,你可以根据需要调整这些函数,例如添加事件监听器,使得全选/反选按钮可以触发这些功能。在网页开发中,这样的功能能够显著...

    jQuery操作checkbox并获取选中值

    本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。...

    jstree_checkbox

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

    Asp.net CheckBoxList操作集合

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

    JS实现TreeView中Checkbox的控制

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

    javascript实现checkbox多级选择

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

    js tree,checkbox tree

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

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

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

    JQuery操作checkbox、radio等示例

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

    js操作CheckBoxList实现全选/反选(在客服端完成)

    对于CheckBoxList控件来说,一方面要实现大量数据在服务器端的绑定工作,另一方面往往要求实现全选、反选等功能,接下来将介绍js操作CheckBoxList实现全选/反选,感兴趣的朋友可以了解下,或许对你有所帮助

    原生js操作checkbox用document.getElementById实现

    接着,我们来看如何通过原生JavaScript操作复选框。document.getElementById()方法可以根据元素的ID来获取对应的DOM对象,一旦获取了这个对象,我们可以通过它的checked属性来检查复选框是否被选中。如果复选框被...

    checkbox.js

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

Global site tag (gtag.js) - Google Analytics