js判断Checkbox的全选，反选，多选与只能选一个

最新推荐文章于 2020-09-19 14:22:59 发布

转载最新推荐文章于 2020-09-19 14:22:59 发布 · 910 阅读

·

0

·

收录于

js

本文介绍如何在网页中使用GridView与Checkbox结合，实现全选与反选功能，以及用户信息的添加、修改与删除操作。

function ShowMDialog(URL,Width,Height,scrollbars)
{
     return window.showModalDialog(URL, "","dialogWidth:"+Width+"px;dialogHeight:"+Height+"px; status:no;directories:no; scrollbars:"+scrollbars+";Resizable:no; ");
}
//全选与反选
<script type="text/javascript">
var checkflag ="false";
function check(field)
{
     if (checkflag =="false")
     {
           for (i =0; i < field.length; i++)
           {
                field[i].checked =true;}
                checkflag ="true";
                return"全选";
           }
     else
     {
           for (i =0; i < field.length; i++)
          {
                field[i].checked =false;
           }
          checkflag ="false";
           return"全选";
     }
}
</script>
//添加
    function addDeptid(deptid)
    {
        var dept_id = deptid;
        if(dept_id==0)
        {
            alert("请选择一个部门！")
            return;
        }
        else
        {
            var re=ShowMDialog('emp_add.aspx?dept_id='+dept_id,'820','670','no');
             if(re=="ok"){
               window.location.reload();
             }
        }
    }
//修改（修改是判断Checkbox只能选择一个进行修改，最后获取选中的值来作为参数跳转页面）
    function checkboxNum(emp_id){
    //Checkbox选择
        var datalist = document.getElementById("GridView1");
       var inputs = datalist.getElementsByTagName("input");
        var checked_counts =0;
        var checkeValue =0;
        for(var i=0;i<inputs.length;i++)
        {
            if(inputs[i].checked)
            {
                checkeValue = inputs[i].value;
                checked_counts++;            }
        }
        if(checked_counts>1)
        {
            alert("只能选择一项！");
        }
        elseif(checked_counts==0)
        {
            alert("请选择一项修改！");
        }
        else
        {
             var re=ShowMDialog('emp_add.aspx?edit_emp_id='+emp_id,'820','670','no');
            if(re=="ok"){
               window.location.reload();
           }
        }
｝
//删除（先判断Checkbox的选择个数，以数组的形式穿到另外一个页面）
    function delSelectedClick(emp_id)
    {
        if(emp_id==0)
        {
           alert("请选择一个部门！")
            return;
        }
        var datalist = document.getElementById("GridView1");
       var chkArray = datalist.getElementsByTagName("input");
       var flag =false;
        var checkValue ="";
        for(var i=0;i<chkArray.length;i++)
        {
            if( chkArray[i].type=="checkbox")
           {
                if(chkArray[i].checked)
                {
                    checkValue += chkArray[i].value+",";
                    flag =true;
               }
            }
        }
        if(flag ==true)
        {
            if(confirm("确定要删除选中用户吗?"))
            {
                window.navigate("user_content.aspx?delete_emp_id="+emp_id);
                returntrue;
            }
           else
            {
                returnfalse;
            }
       }
       else
        {
            alert("请先选择要删除的用户！");
            returnfalse;
        }

<table>
     <tr>
          <td>
                <input id="Checkbox1" type="checkbox"/>全选
                <a href="javascript:addDeptid(<%=iDeptid %>)" style="cursor: pointer"><img src="../img/tab/33.gif" alt=""/>新增</a>
               <a href="javascript:checkboxNum(<%=iDeptid %>)" style="cursor: pointer"><img src="../img/tab/33.gif" alt=""/>修改</a>
                <a href="javascript:delSelectedClick(<%=iDeptid %>)" style="cursor: pointer"><img src="../img/tab/33.gif" alt=""/>删除</a>

          </td>
     </tr>
</table>
以上是Checkbox与GridView的结合进行操作

标签

#javascript #function #input #url #table

评论

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。