使用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. 在Ubuntu中增加root用户登录

    一:增加root用户登录 1.打开终端,输入:sudo gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 2.在弹出的编辑框里输入:gree ...

  2. css 三角图标

    .triangle-right{ display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; bord ...

  3. 调用百度地图开发平台的JavascriptAPI实现将市县位置转换成坐标

    最近的项目要做的地图比较多,有的还比较复杂,而地图用到的坐标,上网找json文件更是良莠不齐的.真是让人伤脑筋,后来突然想到了百度地图开发平台,没想到真的有对应的API哦,谢天谢地!!!下面说一下完整 ...

  4. mysql主从同步详细教程

    1.安装好主数据库和从数据库,这个大家肯定都会,如果不是很明白,可以参考我前面的安装教程. 例子: 假如我需要同步test1.test2数据库 系统:centos7 主库主机:192.168.1.25 ...

  5. JavaScript父子页面之间的相互调用

    父页面: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>< ...

  6. 剑指offer五十五之链表中环的入口结点

    一.题目 一个链表中包含环,请找出该链表的环的入口结点. 二.思路 方法一: 假设x为环前面的路程(黑色路程),a为环入口到相遇点的路程(蓝色路程,假设顺时针走), c为环的长度(蓝色+橙色路程). ...

  7. Spring Security构建Rest服务-1000-使用SpringSocial开发第三方登录之大白话OAuth协议

    OAuth协议简介 OAuth协议要解决的问题    OAuth协议中的各种角色 OAuth协议运行流程 OAuth协议,在网上也看了一些资料,意思就是给你颁发一个临时的通行证,你拿着这个通行证可以访 ...

  8. 前端的CRUD增删改查的小例子

    前端的CRUD增删改查的小例子 1.效果演示 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> & ...

  9. 【Java并发编程】：并发新特性—Lock锁和条件变量

    简单使用Lock锁 Java5中引入了新的锁机制——Java.util.concurrent.locks中的显式的互斥锁:Lock接口,它提供了比synchronized更加广泛的锁定操作.Lock接 ...

  10. 【树】Kth Smallest Element in a BST（递归）

    题目: Given a binary search tree, write a function kthSmallest to find the kth smallest element in it. ...