JS实现的全选、全不选及反选功能【案例】

本文实例讲述了JS实现的全选、全不选及反选功能。分享给大家供大家参考,具体如下:

效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中.

html结构代码:

<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">

javascript代码如下: 

<script>
  /*一:需求分析:
      (1)点击全选:选中所有选择框(设置checked属性为true)
      (2)点击全不选:不选中所有选择框(设置checked属性为false)
      (3)点击反选:让每一个选择框的checked属性与自身相反
    二:思路分析
        1.获取元素
        2.注册事件
        3.事件处理
  */
  //1.获取页面元素
  var checkAll = document.getElementById('checkAll');//全选
  var unCheckAll = document.getElementById('unCheckAll');//全不选
  var reverseCheck = document.getElementById('reverseCheck');//反选
  var checkList = document.getElementsByClassName('check');//选择框列表
  //2.注册事件
  //2.1 全选
  checkAll.onclick = function(){
    //3.事件处理:选中所有选择框(设置checked属性为true)
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = true;
    }
  }
  //2.2 全不选
  unCheckAll.onclick = function(){
    //3.事件处理:不选中所有选择框(设置checked属性为false)
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = false;
    }
  }
  //2.3 反选
  reverseCheck.onclick = function(){
    //3.事件处理:让每一个选择框的checked属性与自身相反
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = !checkList[i].checked;//逻辑非取反
      // if (checkList[i].checked == true){
      //   checkList[i].checked = false;
      // }else{//false
      //   checkList[i].checked = true;
      // }
    }
  }
</script>

完整示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS全选、全不选、反选</title>
</head>
<body>
<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">
<script>
  /*一:需求分析:
      (1)点击全选:选中所有选择框(设置checked属性为true)
      (2)点击全不选:不选中所有选择框(设置checked属性为false)
      (3)点击反选:让每一个选择框的checked属性与自身相反
    二:思路分析
        1.获取元素
        2.注册事件
        3.事件处理
  */
  //1.获取页面元素
  var checkAll = document.getElementById('checkAll');//全选
  var unCheckAll = document.getElementById('unCheckAll');//全不选
  var reverseCheck = document.getElementById('reverseCheck');//反选
  var checkList = document.getElementsByClassName('check');//选择框列表
  //2.注册事件
  //2.1 全选
  checkAll.onclick = function(){
    //3.事件处理:选中所有选择框(设置checked属性为true)
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = true;
    }
  }
  //2.2 全不选
  unCheckAll.onclick = function(){
    //3.事件处理:不选中所有选择框(设置checked属性为false)
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = false;
    }
  }
  //2.3 反选
  reverseCheck.onclick = function(){
    //3.事件处理:让每一个选择框的checked属性与自身相反
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = !checkList[i].checked;//逻辑非取反
      // if (checkList[i].checked == true){
      //   checkList[i].checked = false;
      // }else{//false
      //   checkList[i].checked = true;
      // }
    }
  }
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • js实现全选反选不选功能代码详解

    本文实例为大家分享了js实现全选反选不选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <meta charset='utf-8' /> <body> <input type='checkbox' name='id' />哈哈<br/> <input type='checkbox' name='id' />哈哈<br/> <input type='checkbox'

  • JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享

    效果展示: 代码实现: 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use

  • 基于JavaScript实现全选、不选和反选效果

    利用javascript实现全选.不选和反选效果,这个不用多说,直接来代码,代码中自有注释帮你理解. <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ // 获取所有的按钮 var btns = document.getElementsByTagName("button&quo

  • js实现checkbox全选、不选与反选的方法

    本文实例讲述了js实现checkbox全选.不选与反选的方法.分享给大家供大家参考.具体分析如下: 一.思路: 1. 获取元素 2. 给全选 不选 反选添加点击事件 3. 用for循环checkbox 4. 把checkbox的checked设置为true即实现全选 5. 把checkbox的checked设置为false即实现不选 6. 通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设

  • jquery全选/全不选/反选另一种实现方法(配合原生js)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 使用vue.js实现checkbox的全选和多个的删除功能

    template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">

  • JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBox复选框JS实现全选.不选.全不选功能,很简单,具体内容如下 思路: 1.获取元素 2.给全选 不选 反选添加点击事件 3.用for循环checkbox 4.把chec

  • js, jQuery实现全选、反选功能

    js ,jq实现全选.反选功能: js:思路:1.点击全选按钮实现,下面内容全选,与反选 2.下面有一个没有选中时,全选按钮不勾选,当全部选中时才全选.这里引入一个计数器,来判断是否全部选中. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 全选<input type

  • JS实现CheckBox复选框全选全不选功能

    CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭.大多数应用程序的"设置"对话框内均有此控件.我们看到的可以打勾的就是CheckBox. 该控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBo

  • js与jQuery实现checkbox复选框全选/全不选的方法

    本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大

  • 原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

    日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数. 功能介绍点此查看DEMO演示 1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致; 2. 自动更改 全选/全不选 选框的状态, 即列

  • JS实现的全选、全不选及反选功能【案例】

    本文实例讲述了JS实现的全选.全不选及反选功能.分享给大家供大家参考,具体如下: 效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中. html结构代码: <input class = 'check' type="checkbox" > <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox">

  • js实现表单项的全选、反选及删除操作示例

    本文实例讲述了js实现表单项的全选.反选及删除操作.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网站会员激活码管理</title> <script language="javascript"> function ReSel(){ for(i=0;i<document.form1.logs.leng

随机推荐