javascript实现复选框的全选功能

原创 2007年10月15日 10:33:00
复选框的全选功能在Web开发中使用非常频繁,而实现的方法一般分为两种:客户端实现与服务器端实现。
服务器端实现需要与服务器端交互,因此效率较差。今天向大家介绍一下用脚本在客户端实现此功能的方法。
效果如图

当点击按钮或全选复选框时,上表中的所有数据被钩上。
下面是js代码:

<script type="text/javascript">
    
//根据传入的checkbox的选中状态设置所有checkbox的选中状态
    function selectAll(obj)
    
{
        var allInput 
= document.getElementsByTagName("input");
        
//alert(allInput.length);
        var loopTime = allInput.length;
        
for(i = 0;i < loopTime;i++)
        
{
            
//alert(allInput[i].type);
            if(allInput[i].type == "checkbox")
            
{
                allInput[i].
checked = obj.checked;
            }

        }

    }

</script>

调用时:
<input id="chk_SelectALL" type="checkbox" onclick="selectAll(this)" />全选
就可实现了。
由于是在客户端完成此效果,所以控件不能使用服务器端控件,否则无效。
 

JavaScript--点击按钮实现复选框全选和反选功能

功能实现: 1、点击全选和反选按钮,实现复选框全选和部分选的功能 2、点击全选复选框,实现子复选框全选或全不选功能 完整代码: ...
  • she_rryn
  • she_rryn
  • 2015-08-20 22:34:29
  • 2409

js实现简单的checkbox全选和取消全选效果

js点击checkbox实现全选效果 function DoCheck() { var ch=document.getElementsByName("choose"); ...
  • sunwei3160
  • sunwei3160
  • 2014-08-12 14:37:19
  • 17184

使用js实现复选框的全选、取消功能

function checkAll() { var all=document.getElementById('all'); var one=document.getElemen...
  • zzh_meng520
  • zzh_meng520
  • 2017-02-28 16:13:21
  • 9203

javaScript全选

  • 2010年12月01日 11:04
  • 1KB
  • 下载

用原生js实现复选框选择以及全选非全选功能 (待看)

CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。大多数应用程序的“设置”对话框内均有此控件。我们看到的可以打勾的就是CheckBox。   该控件表明一个特定的状态(即选项...
  • melody_day
  • melody_day
  • 2016-12-08 16:31:07
  • 1963

javascript实现全选全不选

在JSP页面中有6个复选框,第一个复选框是全选和全不选,其余5个为普通复选框,当点击全选复选框后,普通复选框将被全部选中,如果再次点击 全选复选框,那么普通复选框将被全部不选中,同时,如果全选复选框在...
  • u011740475
  • u011740475
  • 2014-12-05 10:21:25
  • 2266

jquery实现复选框的全选操作

最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的。自己琢磨了下,把功能实现,整理如下。 实现细节如...
  • mj158518
  • mj158518
  • 2016-07-20 00:30:13
  • 4047

【JS】复选框的全选和取消全选

测试代码如下: li{list-style: none;}
  • zuncle
  • zuncle
  • 2017-02-09 10:44:08
  • 1575

今天把JS控制checkbox全选、取消全选、删除功能的代码贴出来。。。。。

  • 2010年01月24日 14:55
  • 1KB
  • 下载

javascript 实现复选框全选/取消功能

  • 2012年03月23日 22:10
  • 926B
  • 下载
收藏助手
不良信息举报
您举报文章:javascript实现复选框的全选功能
举报原因:
原因补充:

(最多只允许输入30个字)