使用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. javaweb+spring 项目集成异常的处理

    在web项目开发中,一个系统应该要考虑到异常情况的处理,并且应该当异常发生时应该需要记录相应的异常日志,对于用户而言则不能直接抛出异常,需要考虑到用户的体验: 以下就介绍基于spring框架的基础上的 ...

  2. Adapter as a WCF Binding - In Depth

    WCF LOB Adapter SDK surfaces an adapter as a custom WCF Binding.  A WCF Bindingcorresponds to the “H ...

  3. 高仿IOS下拉刷新的粘虫效果

    最近看需要做一款下拉刷新的效果,由于需要和Ios界面保持一致,所以这用安卓的方式实现了ios下的下拉刷新的粘虫效果. 最新的安卓手机版本的QQ也有这种类似的效果,就是拖动未读信息的那个红色圆圈,拖动近 ...

  4. 配置文件备份方案（expect+shell）

    需求描述:备份所有线上服务器squid.httpd.mysql.nginx的配置文件 环境:在公司内网采用expect+shell脚本模式,进行批量备份.expect脚本通过ssh登录服务器,从本地c ...

  5. (转)Python标准库02 时间与日期 (time, datetime包)

    原文:http://www.cnblogs.com/vamei/archive/2012/09/03/2669426.html https://www.liaoxuefeng.com/wiki/001 ...

  6. activity生命周期实例（不同启动模式）

    1.生命周期的几个阶段介绍: onCreate: 表示activity被创建,做一些初始化工作如调用setContentView去加载界面布局资源.初始化Acitivity所需数据等. onResta ...

  7. openssl生成RSA格式的公私钥，并转为pkcs8格式

    第一步:生成私钥,这里我们指定私钥的长度为2048 openssl genrsa -out rsa_private_key.pem 2048 第二步:根据私钥生成对应的公钥: openssl rsa ...

  8. linux中的tar命令的使用

    参考网址: https://www.cnblogs.com/newcaoguo/p/5896975.html https://www.cnblogs.com/xccjmpc/p/6035397.htm ...

  9. springboot自定义错误页面

    springboot自定义错误页面 1.加入配置: @Bean public EmbeddedServletContainerCustomizer containerCustomizer() { re ...

  10. php 数字 的简单加解密

    转载 <?php /** * 加密解密类 * 该算法仅支持加密数字.比较适用于数据库中id字段的加密解密,以及根据数字显示url的加密. * @author 深秋的竹子 * @email 812 ...