使用js实现全选、反选、全不选。

代码如下：

<html>

<head>

<script type="text/javascript">

function checkEvent(name,allCheckId)

{

  var allCk=document.getElementById(allCheckId);

  if(allCk.checked==true)

  checkAll(name);

  else

  checkAllNo(name);

}  

//全选

function checkAll(name)

{

  var names=document.getElementsByName(name);

  var len=names.length;

  if(len>0)

  {

   var i=0;

   for(i=0;i<len;i++)

   names[i].checked=true;

  }

}  

//全不选

function checkAllNo(name)

{

  var names=document.getElementsByName(name);

  var len=names.length;

 if(len>0)

  {

    var i=0;

    for(i=0;i<len;i++)

    names[i].checked=false;

  }

}  

//反选

function reserveCheck(name)

{

  var names=document.getElementsByName(name);

  var len=names.length;  

 if(len>0)

 {

 var i=0;

   for(i=0;i<len;i++)

   {

     if(names[i].checked)

     names[i].checked=false;

     else

     names[i].checked=true;

   }

 }

}

</script>

</head>

<body>

<input type="checkbox" id="ckall" onclick="checkEvent('ckcontact','ckall')" />全选

<input type="checkbox" id="ckReserve" onclick="reserveCheck('ckcontact','ckReserve')" />反选

<br />

<input type="checkbox" name="ckcontact" value="1" />篮球

<br />

<input type="checkbox" name="ckcontact" value="2" />旅游

<br />

<input type="checkbox" name="ckcontact" value="3" />读书

<br />

<input type="checkbox" name="ckcontact" value="4" />美食

<br />

<input type="checkbox" name="ckcontact" value="5" />睡觉

</body>

</html>

Javascript全选，反选，全不选的实现代码的更多相关文章

  1. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  3. 表单Checkbox全选反选全不选

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

  4. checkbook全选/反选/全不选

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  5. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  6. html js 全选 反选 全不选源代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. js实现全选,反选,全不选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  8. WPF DataGrid CheckBox 多选 反选 全选

    效果图 实现此效果的必要关键是 Style+DataTemplate 关键代码: <Window.Resources> <DataTemplate x:Key="Check ...

  9. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

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

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

随机推荐

  1. 推荐算法之 slope one 算法

    1.示例引入 多个吃货在某美团的某家饭馆点餐,如下两道菜: 可乐鸡翅: 红烧肉: 顾客吃过后,会有相关的星级评分.假设评分如下: 评分 可乐鸡翅 红烧肉 小明 4 5 小红 4 3 小伟 2 3 小芳 ...

  2. postgresql-数据库网络地址存储探索

    问题背景 数据库审核过程中发现有存储ip的字段类型为varchar(50).想到postgresql有专门的存储ip类型.然而存在即合理.所以主要对比varchar和inet存储ip的不同. 网络地址 ...

  3. 【hdu6035】 Colorful Tree dfs序

    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6035 题目大意:给你一棵树,树上每个节点都有一个颜色. 现在定义两点间的距离为两点最短路径上颜色集合 ...

  4. easyui combobox下拉框复制后再禁用，点击不会出现下拉框

    easyui combobox下拉框禁用,点击不会出现下拉框 需要做到,在给easyui combobox赋值后,再禁用easyui combobox 解决办法: $("#time-sele ...

  5. Spring Security构建Rest服务-1205-Spring Security OAuth开发APP认证框架之Token处理

    token处理之二使用JWT替换默认的token JWT(Json Web Token) 特点: 1,自包含:jwt token包含有意义的信息 spring security oauth默认生成的t ...

  6. Android Studio SVN的使用

    一 SVN的配置 这篇文章使用的Android studio版本为1.4 RC3. 我选择的是TortoiseSVN,版本为1.8,不要选择1.9版本(目前的最新版),因为如果你安装的是1.9版本当你 ...

  7. Windows 添加用户

    不多说,直接干货! 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可以关注我的个人博客:    http://www.cnblogs.com/zl ...

  8. docker仓库--使用tenxcloud

    上传镜像 1. 在本地 docker 环境中输入以下命令进行登录 sudo docker login index.tenxcloud.com 2. 然后,对本地需要 push 的 image 进行标记 ...

  9. Java 集合框架（二）—— ArrayList

    二.数组列表 —— ArrayList 1.构造方法 ArrayList 是 Java 中的动态数组,底层实现就是对象数组,只不过数组的容量会根据情况来改变. 它有个带 int 类型参数的构造方法,根 ...

  10. vue view 表单验证正常逻辑

    <template> <Form ref="formInline" :model="formInline" :rules="rule ...