`
Fibonaccii
  • 浏览: 4341 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js实现同一页面多个全选(checkbox)

    博客分类:
  • js
阅读更多
直接代码:
1、js:
<script language="javascript" type="text/javascript">
    
        function ChangeAllCheckStatus(objCheckBox, chkAllName,item)
        {
            if (objCheckBox.tagName == "INPUT" && objCheckBox.type == "checkbox")
            {
                var allInput = document.getElementsByName(item);
                for (var i = 0; i < allInput.length; i++)
                {
                    if (allInput[i].type == "checkbox" && allInput[i].name  != chkAllName)
                    {
                        allInput[i].checked = objCheckBox.checked;
                    }
                }
            }
        } 

        function IsSelectOne(chkAllName,item)
        {
            var allInput = document.getElementsByName(item);
            var count = 0;
            var argCarID = "";
            for (var i = 0; i < allInput.length; i++)
            {
                    if (allInput[i].type == "checkbox" && allInput[i].name != chkAllName )
                    {
                        if(allInput[i].checked)
                        {
                          argCarID = argCarID + allInput[i].id + "|";
                          count++;
                        }
                    }
            }
            
            document.getElementById("hide_SelectedLCID").value = argCarID;
            
            return count;
        }
        
         function BatchUpdate()
        {
            var url = "LeaderCarPrintItem.aspx?LC_IDs=" + document.getElementById("hide_SelectedLCID").value;   
            
            window.open(url,"window","");

            return false;
        }
         function DaoChu()
        {
           if(IsSelectOne('chkAll') == 0) 
           {
           alert('请选择一条记录');
           return false;  
           } else 
           { 
           return BatchUpdate();
           }  
        }
        
    </script>

2、html:

1)全选按钮

<input id="CheckAll_Now" type="checkbox" name="CheckAll_Now" onclick="ChangeAllCheckStatus(this,'CheckAll_Now','CheckItem_Now');" />


2)子按钮

<input id='<%#Eval("ID")%>' type="checkbox"  name="CheckItem_Now"/>

3)button

[url="   onclick=]<img alt=""  src="../../Content/Images/button02_21.gif" width="85" height="18" border="0" />[/url]




PS:
    主要实现记住的方法是document提供的几个方法:
  close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。 getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。
 

http://www.w3school.com.cn/htmldom/dom_obj_document.asp


  pS2:
      设置页面只读属性

//其中getElementsByTagName方法要合理运用
script type="text/javascript">
 

var s=window.opener.condForm.ifShow.value;//得到父页面的标签值

if("set"!=s){
var selectElements= document.getElementsByTagName("select");
for(i=0;i<selectElements.length;i++){
   selectElements[i].disabled=true;

}
var inputElements = document.getElementsByTagName("input");

for(i=0;i<inputElements.length;i++){
if(inputElements[i].type=="button"){
  inputElements[i].disabled=true;
}else{
inputElements[i].readOnly = "readonly";
}

}
window.opener.condForm.ifShow.value="set";
}
   
 
 
</script> 

1
2
分享到:
评论

相关推荐

    JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2 .0

    在本项目"JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2.0"中,我们将探讨如何利用JavaScript实现对复选框(checkbox)的全选、反选功能,并获取选中的复选框的值。这些功能在用户界面中常见于批量...

    基于JS实现checkbox全选功能实例代码

    - 当页面中有多个checkbox群组时,为了确保全选功能正确工作,每个群组都应该有自己的独立逻辑,避免使用相同name属性值的checkbox。 - 对于复杂的表单,可能需要考虑性能优化,避免在大表单中使用全选功能时造成...

    Javascript实现CheckBox的全选与取消全选的代码

    在Web开发中,JavaScript是实现页面交互的重要技术之一。当处理列表数据进行批量操作时,常常需要使用到复选框(CheckBox)的全选和取消全选功能,以便快速选择或取消选择多个项目。本文将介绍如何利用JavaScript来...

    JS实现复选框全选全不选以及子复选框带动全选框的选中

    在网页交互设计中,复选框(Checkbox)是一种常见的用户输入元素,用于让用户选择一个或多个选项。在处理大量复选框时,全选/全不选功能是提高用户体验的有效方式。本文将深入探讨如何使用JavaScript实现这个功能,...

    javascript checkbox全选和反选的简单实现

    当需要对多个checkbox进行全选和反选操作时,可以通过JavaScript来实现这一功能,提高用户交互的便利性。以下是关于使用JavaScript实现checkbox全选和反选功能的知识点。 首先,了解checkbox的基本使用方法是基础。...

    模拟select带checkbox全选反选取消插件tomcat发布使用

    在HTML中,`&lt;select&gt;`元素用于创建下拉列表,用户可以选择一个或多个选项。然而,原生的Select控件并不支持像复选框那样的多选功能,因此我们需要寻找替代方案。这个插件就是这样的解决方案,它模拟了Select的外观和...

    基于jQuery的三个JS复选框全选反选例子.zip

    本示例“基于jQuery的三个JS复选框全选反选例子.zip”聚焦于如何利用jQuery实现复选框的全选与反选功能,这在表格或者多选项选择场景中非常常见。以下将详细介绍这一功能的实现方式。 首先,我们需要理解复选框...

    CheckBox 选中效果 选中子的父自动选中,选中父的子全部选中

    当用户在一个层级结构中操作多个CheckBox时,实现“选中子项自动选中父项”或“选中父项则所有子项均被选中”的功能可以极大地提高交互效率。 #### 关键技术点解析 1. **JSP页面结构**:页面采用JSP技术构建,通过...

    checkbox单选多选

    Checkbox,通常称为复选框,允许用户在多个选项中进行选择,可以同时选择一个或多个选项,这与单选按钮(Radio Button)不同,单选按钮在同一时间只能选择一个选项。在本主题中,我们将深入探讨Checkbox的单选和多选...

    javascript中checkbox使用方法简单实例演示

    全选功能通常用一个单独的checkbox来实现,这个全选checkbox同样需要与其它复选框拥有相同的`name`属性,以便能够统一控制。在全选checkbox上绑定点击事件来改变所有其它复选框的选中状态。 ```javascript function...

    JavaScript 实现的checkbox经典实例分享

    在JavaScript代码片段中,首先通过document.getElementById("allInpTop")获取全选checkbox的DOM对象,并赋值给变量allInpTopObj。同理,其他DOM对象也会被获取并赋给对应的变量,如content1Obj、content2Obj、...

    php+ajax简单实现全选删除的方法

    首先,前台页面需要提供用户操作的界面,通常包括全选复选框(checkbox)和多个待删除项的复选框。示例代码如下: ```html &lt;input type="checkbox" id="ckb_selectAll" onclick="selectAll()" title="选中/取消选中...

    JSP列表中复选框批量选择功能实现

    在JavaServer Pages (JSP) 开发中,常常需要实现用户界面中的批量选择功能,比如在列表中通过复选框来选中多个项目。本文将详细介绍如何在JSP中实现这样的功能,主要涉及HTML、JavaScript 和后端Java的交互。 首先...

    基于javascript实现checkbox复选框实例代码

    在HTML中,复选框的标签是`&lt;input type="checkbox"&gt;`,通过`name`属性可以将多个复选框关联在一起,这样,当用户对一组选项进行全选或者全不选操作时,可以将这些复选框视为一组。例如: ```html &lt;input type="...

    程序天下:JavaScript实例自学手册

    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

    《程序天下:JavaScript实例自学手册》光盘源码

    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

    Jquery_仿制淘宝前台的购物车

    该示例代码是一个基于jQuery实现的简单购物车功能,模拟了淘宝网站前台购物车的部分交互逻辑。主要知识点包括: 1. **事件监听**:通过`$(document...在实际开发中,还需要考虑用户体验、性能优化、安全性等多个方面。

    ztree连接数据库的一些增删该查

    9. **多实例支持**:在同一页面内可生成多个独立的Tree实例。 10. **简单配置**:通过简单的参数设定,实现复杂功能。 **zTree的优势:** zTree的作者积极维护,及时回应用户问题,使得学习和使用过程更为顺畅。...

    java常见的面试题

    - 通过JavaScript可以遍历页面上的checkbox元素,并设置其checked属性为true来实现全选。示例代码如题所示。 3. **Java基本类型**: - 整型:byte(1字节),short(2字节),int(4字节),long(8字节)。 - 浮点型:...

    文思创新、千度软件、江苏大唐、江苏融电、陈开JAVA笔试面试题.doc

    JavaScript中可以通过遍历表单元素并检查其类型为"checkbox"来实现全选多选框。示例代码中,selcheck()函数实现了这一功能,通过getElementsByTagName("input")获取所有输入元素,然后遍历并设置每个checkbox的...

Global site tag (gtag.js) - Google Analytics