js实现同一页面多个全选（checkbox）

最新推荐文章于 2022-02-25 16:00:38 发布

Fibonaccii

最新推荐文章于 2022-02-25 16:00:38 发布

阅读量295

点赞数

分类专栏： js 文章标签： HTML JavaScript ASP ViewUI

js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

直接代码：
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() 方法，不同的是在每个表达式之后写一个换行符。

[url]http://www.w3school.com.cn/htmldom/dom_obj_document.asp[/url]

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>