JS基础学习篇----JS控制checkbox全选、取消全选、删除功能

 前面讨论了JS控制checkbox,及对document.all,document.getElementById,document.getElementsByTagName,document.getElementsByName等做了学习,
链接如下:
http://blog.csdn.net/luweifeng1983/archive/2008/12/16/3532529.aspx
http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3549769.aspx
http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3550665.aspx
http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3551096.aspx
今天把JS控制checkbox全选、取消全选、删除功能的代码贴出来。。
看下面两种实现方法:

  1. 方法一:
  2. function checkAll()
  3. {
  4.     var code_Values = document.all['code_Value'];
  5.     if(code_Values.length){
  6.         for(var i=0;i<code_Values.length;i++)
  7.         {
  8.             code_Values[i].checked = true;
  9.         }
  10.     }else{
  11.         code_Values.checked = true;
  12.     }
  13.     
  14. }
  15. function uncheckAll()
  16. {
  17.     var code_Values = document.all['code_Value'];
  18.     if(code_Values.length){
  19.         for(var i=0;i<code_Values.length;i++)
  20.         {
  21.             code_Values[i].checked = false;
  22.         }
  23.     }else{
  24.         code_Values.checked = false;
  25.     }
  26.     
  27. }
  28. function multipleDelete()
  29. {
  30.     var num = 0;
  31.     var code_Values = document.all['code_Value'];
  32.     if(code_Values.length){
  33.         for(var i=0;i<code_Values.length;i++)
  34.         {
  35.             if(code_Values[i].checked == true)
  36.             {
  37.                 num ++;
  38.             }
  39.         }
  40.     }else{
  41.         if(code_Values.checked == true){
  42.             num ++ ;
  43.         }
  44.         
  45.     }
  46.     
  47.     if(num == 0){
  48.         alert('Please select delete item');
  49.     }
  50.     if(num >0){
  51.         document.BuCodeSearch.action = '<%=EusUtil.getPage("lookup.generic.bucode.delete.s")%>';
  52.         document.BuCodeSearch.submit();
  53.     }
  54. }
  55. </script>
  56. 方法二:
  57. function checkAll()
  58. {
  59.     var code_Values = document.getElementsByTagName("input");
  60.     for(i = 0;i < code_Values.length;i++){
  61.         if(code_Values[i].type == "checkbox")
  62.         {
  63.             code_Values[i].checked = true;
  64.         }
  65.     }
  66. }
  67. function uncheckAll()
  68. {
  69.     var code_Values = document.getElementsByTagName("input");
  70.     for(i = 0;i < code_Values.length;i++){
  71.         if(code_Values[i].type == "checkbox")
  72.         {
  73.             code_Values[i].checked = false;
  74.         }
  75.     }
  76. }
  77. function multipleDelete()
  78. {
  79.     if (document.BuCodeSearch.elements["code_Value"])
  80.     {
  81.         var num = 0;
  82.         var fm = document.BuCodeSearch;
  83.         if (document.BuCodeSearch.elements["code_Value"])
  84.         {
  85.             var elm = document.BuCodeSearch.elements["code_Value"];
  86.             var ename = "code_Value";       
  87.             if (elm.length) {
  88.                 var len = fm.elements[ename].length;
  89.                 for (var i  = 0; i< len; i++) {
  90.                     var e = fm.elements[ename][i];
  91.                     if (e.checked == true){
  92.                         num++;
  93.                     }
  94.                 }
  95.             } else {
  96.                 if (elm.checked == true ) {
  97.                     num++;
  98.                 }
  99.             }       
  100.             if (num > 0 )
  101.             {
  102.                 document.BuCodeSearch.action = '<%=EusUtil.getPage("lookup.generic.bucode.delete.s")%>';
  103.                 document.BuCodeSearch.submit();
  104.             }   
  105.         }   
  106.     }
  107.     
  108. }
code_Value为checkbox表单的名称, BuCodeSearch为form名称
  1. <td align="left" width="20"><input type="checkbox" name="code_Value" value="<%=userDefFieldValueBean.getUdfValue()%>"></td>

你可能感兴趣的:(JS基础学习篇----JS控制checkbox全选、取消全选、删除功能)