效果：

代码：

 <head runat="server">

     <title></title>

     <script type="text/javascript">

         window.onload = function () {

             var ckall = document.getElementById('ck1');

             var ck = document.getElementsByName('name1');

             ckall.onclick = function () {

                 for (var i = 0; i < ck.length; i++) {

                     if (ckall.checked == true) {

                         ck[i].checked = true;

                     }

                     else {

                         ck[i].checked = false;

                     }

                 }

             }

         };

     </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <input type="checkbox" id="ck1" />

     全选

     <div id="div1">

         <input type="checkbox" name="name1" />

         <input type="checkbox" name="name1" />

         <input type="checkbox" name="name1" />

         <input type="checkbox" name="name1" />

         <input type="checkbox" name="name1" />

         <input type="checkbox" name="name1" />

     </div>

     </form>

 </body>

点滴积累【JS】---JS小功能(checkbox实现全选和全取消)的更多相关文章

  1. JS小案例--全选和全不选列表功能的实现

    纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  2. 使用js实现全选功能。（全选，全不选，反选）

    作业210721 提交代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  4. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  5. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  6. js复选框实现全选、全不选、反选

    复选框为checkbox对象 通过input就可以将一个简单的复选框呈现在页面上 <input type="checkbox" /> 要实现的大概就是这样一个页面 思路 ...

  7. 全选，全不选，反选的js实现

    全选练习       ** 使用复选框上面一个属性判断是否选中                   - checked属性                   - checked=true:选中    ...

  8. JS案例五：设置全选、全不选以及反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS练习：表格全选与全不选

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  10. JavaScript学习——使用JS完成全选和全不选操作

    1.我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)和全不选,显示效果如下: 2.步骤分析: 第一步:确定事件(onclick)并为其绑定一个函数(事件绑定到编号前面的复选框里面) 第二步 ...

随机推荐

  1. <摘录>GCC 中文手

    GCC 中文手册 作者:徐明 GCC Section: GNU Tools (1) Updated: 2003/12/05 Index Return to Main Contents -------- ...

  2. ocx控件打印之基础篇

      Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实 ...

  3. javascript 获取http头信息

    Javascript中跟response header有关的就两个方法: getResponseHeader 从响应信息中获取指定的http头 语法 strValue = oXMLHttpReques ...

  4. [转]Sql server 大数据量分页存储过程效率测试附代码

    本文转自:http://www.cnblogs.com/lli0077/archive/2008/09/03/1282862.html 在项目中,我们经常遇到或用到分页,那么在大数据量(百万级以上)下 ...

  5. WSDL-学习总结

    1.什么是WSDL 是一种使用 XML 编写的文档.这种文档可描述某个 Web service.它可规定服务的位置,以及此服务提供的操作(或方法). 2.WSDL文档结构: <binding&g ...

  6. 解决html视频播放只有声音没有图像的办法

    HTML5中并没有指定视频解码器,它留给了浏览器来决定. MP4有四种编码格式(MPEG4(DivX),MPEG4(Xvid),AVC(H264),HEVC(H265)): 只有使用AVC(H264) ...

  7. transport.js报hasOwnProperty对象不支持此属性

    ECShop transport.js错误 这次出现的问题是transport.js在IE下提示对象不支持该用法.出现错误位置为608行的下面的代码: if(this.hasOwnProperty(k ...

  8. [Angular] Angular i18n Pluralization Support

    // Component: this.coursesTotal = this.course,length <div i18n>{coursesTotal, plural, =0 {No c ...

  9. tomcat在ubuntu中设置开机启动

    #!/bin/bash export JAVA_HOME=/usr/lib/jdk/jdk1.7.0_72 WEBROOT_PATH=/home/zhengze/workspace WEBSERVER ...

  10. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-为什么无法打开官方范例的项目，打开tszip文件时提示尝试越过结尾怎么办

    打开新的解决方案,找到tszip文件   提示错误Advanced Setting时越过结尾   到这里一般VS会卡死   但是我们已经可以得到解压出来的文件夹,其中包含PLC的完整项目文件夹,可以新 ...