<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>请输入关键词</title>

 <script type="text/javascript" src="js/jquery.min.js"></script>

 </head>

 <body>

 <input type="checkbox" class="ipt">歌曲1<br>

 <input type="checkbox" class="ipt">歌曲2<br>

 <input type="checkbox" class="ipt">歌曲3<br>

 <input type="checkbox" class="ipt">歌曲4<br>

 <input type="checkbox" class="ipt">歌曲5<br>

 <input type="button" class="btn1" value="全选">

 <input type="button" class="btn2" value="全不选">

 <input type="button" class="btn3" value="反选">

 <script type="text/javascript">

 $(function(){

 $(".btn1").click(function(){

 $("input:checkbox").attr("checked",true);

 });

 $(".btn2").click(function(){

 $("input:checkbox").attr("checked",false);

 });

 $(".btn3").click(function(){

 $("input:checkbox").each(function(){

 $(this).attr("checked",!$(this).attr("checked"));

 })

 });

 })

 </script>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>反选</title>

     <script type="text/javascript">

         //提示: 事件需要加给  #checkedAll_2, 获取 name=items 的 checkbox 数组

         //判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择

         //若没有被选择, 则 name=items 的 checkbox 都要取消选择

         //根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择

         //checked = false 取消选择. 

         //还需要给每个  name=items 的 checkbox 加响应函数

         //判断  name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.

         //若都被选择: 则使  #checkedAll_2 被选择

        window.onload=function(){

             //需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中

         //若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中

         //若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中

         //若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.

            document.getElementById("checkedAll_2").onclick=function(){

                var flag=this.checked;

                var items=document.getElementsByName("items");

                for(var i=0;i<items.length;i++){

                    items[i].checked=flag;

                }

            }

            //给每个item添加事件

            var items=document.getElementsByName("items");

             for(var i=0;i<items.length;i++){

                 items[i].onclick=function(){

                     //记录有多少个items被选中了

                     var number=0;

                     for(var j=0;j<items.length;j++){

                         if(items[j].checked){

                             number++;

                         }

                     }

                     document.getElementById("checkedAll_2").checked=(items.length==number);

                 }

             }

            //全选

            document.getElementById("CheckedAll").onclick = function(){

             for(var i = 0; i < items.length; i++){

                 items[i].checked = true;

             }

         }

            //全不选

            document.getElementById("CheckedNo").onclick = function(){

             for(var i = 0; i < items.length; i++){

                 items[i].checked = false;

             }

         }

            //反选

            document.getElementById("CheckedRev").onclick = function(){

             for(var i = 0; i < items.length; i++){

                 items[i].checked = !items[i].checked;

             }

         }

            //提交

            document.getElementById("send").onclick = function(){

             for(var i = 0; i < items.length; i++){

                 if(items[i].checked){

                     alert(items[i].value);

                 }

             }

        }

     </script>

 </head>

 <body>

     <form method="post" action="">

         你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 <br/>

         <input type="checkbox" name="items"  value="足球" />足球

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

         <input type="checkbox" name="items"m value="羽毛球" />羽毛球

         <input type="checkbox" name="items"  value="乒乓球" />乒乓球<br/>

         <input type="button" id="CheckedAll" value="全　选" />

         <input type="button" id="CheckedNo"  value="全不选" />

         <input type="button" id="CheckedRev" value="反　选" />

         <input type="button" id="send" value="提　交" />

     </form>

 </body>

 </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. haproxy,tomcat.apache记录用户真实IP

    Haproxy配置: default加入: option httpclose option forwardfor Tomcat配置: server.xml中添加 prefix="localh ...

  2. C# DateDateTimePicker设置属性ShowCheckBox为True

    DateDateTimePicker的属性ShowCheckBox为True后,可以使用时间控件的复选框. 但是如果,你想设置CheckBox的选中状态为False的话,那么请注意赋时间值和赋状态值的 ...

  3. huangwenlong and hanqihong开光的dijkstra

    #include<iostream> #include<vector> #include<queue> #include<cstring> #inclu ...

  4. JAVA IO分析二：字节数组流、基本数据&对象类型的数据流、打印流

    上一节,我们分析了常见的节点流(FileInputStream/FileOutputStream  FileReader/FileWrite)和常见的处理流(BufferedInputStream/B ...

  5. Linux转发性能评估与优化(转发瓶颈分析与解决方式)

    线速问题 非常多人对这个线速概念存在误解. 觉得所谓线速能力就是路由器/交换机就像一根网线一样. 而这,是不可能的.应该考虑到的一个概念就是延迟. 数据包进入路由器或者交换机,存在一个核心延迟操作,这 ...

  6. Android音频: 怎样使用AudioTrack播放一个WAV格式文件?

    翻译 By Long Luo 原文链接:Android Audio: Play a WAV file on an AudioTrack 译者注: 1. 因为这是技术文章,所以有些词句使用原文,表达更准 ...

  7. this的指向问题

    在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象. 例 1: var name = "windowsName"; function ...

  8. Unity For Android Cardboard App ( 1 )：基础入门

    作者: ericzwhuang 前言 目前Google官方推出的VR设备有DayDream(2016年推出)和Cardboard(2014年推出)两种. Daydream是消费级VR解决方案,提供了手 ...

  9. IDEA Translation插件中有道智云（有道翻译）应用ID，密钥申请教程

    登录链接 该登录登录,该注册注册(信息随意填写) 自然语言翻译=>翻译实例=>创建实例(信息随意填写) QQ截图20170701231552.png 应用管理=>我的应用=>创 ...

  10. 导入maven项目时出现 Version of Spring Facet could not be detected. 解决方法

    问题出现在: 导入maven项目的时候,其中,我的这个maven项目是由Spring,Struts2,Mybatis搭建的. 问题截图:  即Spring的版本不能被检测到.此时需要做的就是找到spr ...