1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>请输入关键词</title>
  6.  <script type="text/javascript" src="js/jquery.min.js"></script>
  7.  </head>
  8.  <body>
  9.  <input type="checkbox" class="ipt">歌曲1<br>
  10.  <input type="checkbox" class="ipt">歌曲2<br>
  11.  <input type="checkbox" class="ipt">歌曲3<br>
  12.  <input type="checkbox" class="ipt">歌曲4<br>
  13.  <input type="checkbox" class="ipt">歌曲5<br>
  14.  <input type="button" class="btn1" value="全选">
  15.  <input type="button" class="btn2" value="全不选">
  16.  <input type="button" class="btn3" value="反选">
  17.  <script type="text/javascript">
  18.  $(function(){
  19.  $(".btn1").click(function(){
  20.  $("input:checkbox").attr("checked",true);
  21.  });
  22.  $(".btn2").click(function(){
  23.  $("input:checkbox").attr("checked",false);
  24.  });
  25.  $(".btn3").click(function(){
  26.  $("input:checkbox").each(function(){
  27.  $(this).attr("checked",!$(this).attr("checked"));
  28.  })
  29.  });
  30.  })
  31.  </script>
  32.  </body>
  33.  </html>

javascript实现全选、全不选、反选.

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>反选</title>
  6.      <script type="text/javascript">
  7.  
  8.          //提示: 事件需要加给  #checkedAll_2, 获取 name=items 的 checkbox 数组
  9.          //判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择
  10.          //若没有被选择, 则 name=items 的 checkbox 都要取消选择
  11.          //根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择
  12.          //checked = false 取消选择. 
  13.  
  14.          //还需要给每个  name=items 的 checkbox 加响应函数
  15.          //判断  name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.
  16.          //若都被选择: 则使  #checkedAll_2 被选择
  17.         window.onload=function(){
  18.              //需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中
  19.          //若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中
  20.          //若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中
  21.          //若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.
  22.             document.getElementById("checkedAll_2").onclick=function(){
  23.                 var flag=this.checked;
  24.                 var items=document.getElementsByName("items");
  25.                 for(var i=0;i<items.length;i++){
  26.                     items[i].checked=flag;
  27.                 }
  28.             }
  29.             //给每个item添加事件
  30.             var items=document.getElementsByName("items");
  31.              for(var i=0;i<items.length;i++){
  32.                  items[i].onclick=function(){
  33.                      //记录有多少个items被选中了
  34.                      var number=0;
  35.                      for(var j=0;j<items.length;j++){
  36.                          if(items[j].checked){
  37.                              number++;
  38.                          }
  39.                      }
  40.                      document.getElementById("checkedAll_2").checked=(items.length==number);
  41.                  }
  42.              }
  43.             //全选
  44.             document.getElementById("CheckedAll").onclick = function(){
  45.              for(var i = 0; i < items.length; i++){
  46.                  items[i].checked = true;
  47.              }
  48.          }
  49.             //全不选
  50.             document.getElementById("CheckedNo").onclick = function(){
  51.              for(var i = 0; i < items.length; i++){
  52.                  items[i].checked = false;
  53.              }
  54.          }
  55.             //反选
  56.             document.getElementById("CheckedRev").onclick = function(){
  57.              for(var i = 0; i < items.length; i++){
  58.                  items[i].checked = !items[i].checked;
  59.              }
  60.          }
  61.             //提交
  62.             document.getElementById("send").onclick = function(){
  63.              for(var i = 0; i < items.length; i++){
  64.                  if(items[i].checked){
  65.                      alert(items[i].value);
  66.                  }
  67.              }
  68.         }
  69.      </script>
  70.  </head>
  71.  <body>
  72.      <form method="post" action="">
  73.          你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 <br/>
  74.          <input type="checkbox" name="items"  value="足球" />足球
  75.          <input type="checkbox" name="items"  value="篮球" />篮球
  76.          <input type="checkbox" name="items"m value="羽毛球" />羽毛球
  77.          <input type="checkbox" name="items"  value="乒乓球" />乒乓球<br/>
  78.          <input type="button" id="CheckedAll" value="全　选" />
  79.          <input type="button" id="CheckedNo"  value="全不选" />
  80.          <input type="button" id="CheckedRev" value="反　选" />
  81.          <input type="button" id="send" value="提　交" />
  82.      </form>
  83.  </body>
  84.  </html>

表单Checkbox全选反选全不选的更多相关文章

  1. js实现表单checkbox的单选，全选

    全选&单选 //<input type="checkbox" name="" class="quan" value=" ...

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

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

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

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

  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. 表单美化-原生javascript和jQuery多选按钮（兼容IE6）

    前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...

  7. [Swift通天遁地]二、表格表单-(10)快速添加日期选择/多选/动作表单/地图等自定义表单

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. WPF DataGrid CheckBox 多选 反选 全选

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

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

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

随机推荐

  1. UWP 保存Image的图片到本地文件

    上一篇说显示一张图片到Image控件,比较简单. 那个假设我Image控件有图片了,想保存到本地,这个就要花心思了,不过也不复杂的... var rtb = new RenderTargetBitma ...

  2. 分享一个好用的微信npmjs包

    https://www.npmjs.com/package/jquery_wechat_sdk 安装 $ npm install jquery_wechat_sdk 使用 Browser Script ...

  3. 源码安装pipelineDB之CentOS7

    源码下载:https://github.com/pipelinedb/pipelinedb github上面README只要是针对ubunte来安装的. 在正式安装前,要先下载好依赖的包: check ...

  4. vue.js介绍，常用指令，事件，以及制作简易留言版

    一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...

  5. Cs Round#54 E Late Edges

    题意:给定一个无向图,你从结点1开始走,每经过一条边需要1的时间,每条边都有一个开放时间,只有当目前所用的时间大于等于开放时间时,这条边才可以被经过.每一单位时间你都必须经过一条边,问最快什么时候可以 ...

  6. kubernetes nginx ingress 使用记录

    前言 ingress是一种可以暴露k8s集群内部service的方式,用户编辑配置文件定义一个ingress资源即可实现外部网络访问内网service. ingress controller是来管理所 ...

  7. java环境变量配置原理解析以及eclipse导入外包的方法

    1. PATH环境变量.作用是指定命令搜索路径,在命令行下面执行命令如javac编译java程序时,它会到PATH变量所指定的路径中查找看是否能找到相应的命令程序.我们需要把jdk安装目录下的bin目 ...

  8. CSS clear 清除浮动，兼容各浏览器

    .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{zoom ...

  9. JAVA入门[19]-Hibernate简单示例

    一.Hibernate简介 在很多场景下,我们不需要使用JdbcTemplate直接操作SQL语句,这时候可以用ORM工具来节省数大量的的代码和开发时间.ORM工具能够把注意力从容易出错的SQL代码转 ...

  10. RESTful 的通俗解释

    转载自知乎,通俗易懂的讲解了RESTful链接:https://www.zhihu.com/question/28557115/answer/48094438 REST -- REpresentati ...