javascritp checkbox全选反选代码

javascritp checkbox全选反选代码

//全选与反选

<script type="text/网页特效">
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.asp教程x?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("只能选择一项!");
        }
        else if(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);
                return true;
            }
           else
            {
                return false;
            }
       }
       else
        {
            alert("请先选择要删除的用户!");
            return false;
        }

<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的点击方法
 * 要求:
 * 1.全选/全不选的checkbox的name属性为 单个checkbox的name属性名+_all , 注意:最后必须为_all.
 *   例如:单个checkbox的name=or_id,则全选checkbox的name=or_id_all
 * 2.全选/全不选的checkbox必须定义id属性,并且id属性值与name属性值相同
 * 3.所有单个的checkbox在同一个form中.
 * 4.全选/全不选的checkbox可以在form中也可以在form外面.
 * 5.整个页面不允许再有和全选/全不选checkbox同name和同id的组件.
 *
 */
function _tlscheckboxselall(formobj,checkboxclicked){
 var checkname = checkboxclicked.name;//取得点击的checkbox的name属性
 var index = checkname.indexof("_all");//判断是否有_all字符串
 var isall = false;
 if(index!=-1){//如果有_all
  if(index+"_all".length==checkname.length){//满足说明_all是在最后面,表示这是个全选/全不选的checkbox.
   isall = true;
  }
 }
 var thischecked = checkboxclicked.checked;//当前checkbox的状态 true=选中 false=不选中
 if(isall){//点了全选/全不选的checkbox
  var childcheckname = checkname.substring(0,index);
  eval("var allchildcheckboxs = formobj."+childcheckname);
  var childcheckboxcount = allchildcheckboxs.length;
  if(childcheckboxcount==null){//只有1个单个的checkbox
   allchildcheckboxs.checked = thischecked;
  }else{//有2个或2个以上的单个checkbox
   for(var i=0;i<childcheckboxcount;i++){
    allchildcheckboxs[i].checked = thischecked;
   }
  }
 }else{//点了单个的checkbox
  var parentcheckboxname = checkname+"_all";
  if(thischecked==false){
   document.getelementbyid(parentcheckboxname).checked=false;
  }else{//判断点了当前checkbox后是否全部的单个checkbox都处于true状态
   eval("var allchildcheckboxs = formobj."+checkname);
   var childcheckboxcount = allchildcheckboxs.length;
   var isallchecked = true;
   if(childcheckboxcount==null){//只有1个单个的checkbox
    if(allchildcheckboxs.checked==false){
     isallchecked = false;
    }
   }else{//有2个或2个以上的单个checkbox
    for(var i=0;i<childcheckboxcount;i++){
     if(allchildcheckboxs[i].checked==false){
      isallchecked = false;
      break;
     }
    }    
   }
   if(isallchecked){//全部单个checkbox都处于true状态
    document.getelementbyid(parentcheckboxname).checked=true;
   }
  }
 }
}

 

时间: 2024-09-20 18:41:59

javascritp checkbox全选反选代码的相关文章

Jquery CheckBox全选方法代码附js checkbox全选反选代码_jquery

jquery方法如下: 复制代码 代码如下: function CheckAll(val) { $("input[name='chkJob']").each(function() { this.checked = val; }); $("#chkAll").attr("checked", val);//设定全选按钮状态 } val 该参数传递的是全选按钮的选择状态 name='chkJob' 这个为列表中的checkbox名称 chkAll 就为

总结jQuery checkbox全选/反选代码

在修改Hi GPA的时候需要增加一个全选用户的功能,结果被坑惨了. 首先,最终代码是这么写的:  代码如下 复制代码 var text = $('#select-all-student').html(); if (text == '全选') {     $('input[name="studentNumber"]').prop('checked', true);     $('#select-all-student').html('取消全选') } else {     $('inpu

jquery checkbox全选反选实现代码

在jquery中我们要判断checkbox是否选中我们可以直接使用 if($("#id").attr("checked")==true) 来操作. 那么如果我们要实现多个checkbox全选反选就可以利用each进行遍历了 jquery代码  代码如下 复制代码 function selectall(){      var arrChk=$("input[name='deleteid']");//checkbox名称        $(arrCh

jquery、js操作checkbox全选反选

 全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选   代码如下: //全选  function checkAll() {  $('input[name="TheID"]').attr("checked", "checked");  }  //反选  function uncheckAll() {  $('input[name="TheID"]').each(fu

js多兼容全选/反选代码

js多兼容全选/反选代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js多兼容全选/反选代码</title> <script language="javascript教程">  function Choose(sel, arg) //传递2个参数,分别是表名,选

jquery javascript全选反选代码(1/2)

代码如下: function CheckAll(val) { $("input[name='chkJob']").each(function() { this.checked = val; }); $("#chkAll").attr("checked", val);//设定全选按钮状态 } val 该参数传递的是全选按钮的选择状态 name='chkJob' 这个为列表中的checkbox名称 chkAll 就为全选按钮名称 喜欢上了Jquery

jquery checkbox 全选效果代码

jquery checkbox 全选效果代码,很简单的一句代码就可以了,如$('input[type=checkbox]').attr('checked', $(checkbox).attr('checked')); 哦, 下面来看实例 jquery代码如下 <script type="text/网页特效"> function selectall(checkbox) { $('input[type=checkbox]').attr('checked', $(checkbox

checkbox全选js代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

js复选框全选 反选代码

  <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="con