第一种方式：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  body{color: #000}

  </style>

<script>

document.write("<ul>");

for (var i = 0; i <20; i++) {  创建20个Li

  document.write("<li>");

  document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff'); input名字要加“[]”这样后端程序取得时候为数组。

  document.write("</li>");

  }

   document.write("</ul>");

   document.write('<a href="javascript:sall()">全选 </a>'); 此a被点击的时候调用sall方法，此处是调用不是赋值所以要加上“()”。

   document.write('<a href="javascript:nall()">全不选 </a>');

   document.write('<a href="javascript:fall()">反选 </a>');

   var unames=document.getElementsByName("ids[]");

   function sall(){

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

      unames[i].checked="true";

    }

   }

    function nall(){

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

      unames[i].checked="";

    }

   }

    function fall(){

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

        if(unames[i].checked){

           unames[i].checked="";

        }

        else{

           unames[i].checked="true";

        }

    }

   }

</script>

</head>

<body>

</body>

</html>

第二种方式：

<script>

document.write("<ul>");

for (var i = 0; i <20; i++) {

  document.write("<li>");

  document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff');

  document.write("</li>");

  }

   document.write("</ul>");

   document.write('<label for="sall"><input type="checkbox" id="sall" onclick="sall(this)">全选</label>');this把当前的checkbox对象传递给函数内部方便调用该checkbox对象。

   var unames=document.getElementsByName("ids[]");

function sall(that){

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

    unames[i].checked=that.checked;

  }

}

</script>

javascript练习----复选框全选，全不选，反选的更多相关文章

  1. js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...

  2. CheckedListBoxControl 实现复选框的单选与多选功能

    由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...

  3. 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能

    首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...

  4. element-ui 里面el-checkbox多选框，实现全选单选

    data里面定义了 data:[],        actionids:[],//选择的那个actionid        num1:0,//没选择的计数        num2:0,//选中的计数  ...

  5. layui 复选框checkbox 实现全选全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. firefox(火狐)下 js中设置checkbox属性checked="checked"已有，但复选框却不显示勾选的原因

    刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...

  7. Yii 生成表单下拉选框及查询下拉选框

    CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...

  8. 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了

    首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...

  9. FineReport——JS二次开发（复选框全选）

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

  10. Selenium2+python自动化19-单选框和复选框（radiobox、checkbox）

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

随机推荐

  1. DE1-SOC开发板上搭建NIOS II处理器运行UCOS II

    DE1-SOC开发板上搭建NIOS II处理器运行UCOS II   今天在DE1-SOC的开发板上搭建NIOS II软核运行了UCOS II,整个开发过程比较繁琐,稍微有一步做的不对,就会导致整个过 ...

  2. php中urlencode与rawurlencode的区别有那些呢

    urlencode 函数: 返回字符串,此字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+).此编码与 WWW 表单 POST 数据的编码 ...

  3. textarea 在浏览器中禁用拖动和固定大小

    HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 ...

  4. ecstore2.0数据库词典

    数据库词典= 数据库tables列表 =|| Name | Comment ||| sdb_aftersales_return_product | 售后申请 || sdb_b2c_brand | 商品 ...

  5. set_include_path — 设置 include_path 配置选项为当前脚本设置 include_path 运行时的配置选项。

    说明 string set_include_path ( string $new_include_path ) 为当前脚本设置 include_path 运行时的配置选项. 参数 new_includ ...

  6. 使用pt-heartbeat检测主从复制延迟

    不要用SECONDS_BEHIND_MASTER来衡量MYSQL主备的延迟时间,原因如下: A:备库Seconds_behand_master值是通过将服务器当前的时间戳与二进制日志中的事件的时间戳对 ...

  7. android Activity的启动模式

    Android中Activity启动模式详解   在Android中每个界面都是一个Activity,切换界面操作其实是多个不同Activity之间的实例化操作.在Android中Activity的启 ...

  8. SDUT 2608：Alice and Bob

    Alice and Bob Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 Alice and Bob like playing ...

  9. Borg Maze 分类： POJ 2015-07-27 15:28 5人阅读 评论(0) 收藏

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9971   Accepted: 3347 Description The B ...

  10. 转载-Python学习笔记之文件读写

    Python 文件读写 Python内置了读写文件的函数,用法和C是兼容的.本节介绍内容大致有:文件的打开/关闭.文件对象.文件的读写等. 本章节仅示例介绍 TXT 类型文档的读写,也就是最基础的文件 ...