<!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. MYSQL 主从复制---简单易学

    本帖最后由 传说中的草包 于 2017-4-12 09:12 编辑为什么要用mysql主从复制? 这个问题不需要回答吧,,,,,想想,一个人干活快呢,还是一万个能性格功力一样的人干活快呢. 不用解释大 ...

  2. Shell编程进阶篇(完结)

    1.1 for循环语句 在计算机科学中,for循环(英语:for loop)是一种编程语言的迭代陈述,能够让程式码反复的执行. 它跟其他的循环,如while循环,最大的不同,是它拥有一个循环计数器,或 ...

  3. python 3.6 urllib库实现天气爬取、邮件定时给妹子发送天气

    #由于每天早上要和妹子说早安,于是做个定时任务,每天早上自动爬取天气,发送天气问好邮件##涉及模块:#(1)定时任务:windows的定时任务#             配置教程链接:http://b ...

  4. 前端备忘录--JQuery选择器

    基本选择器 基本选择器是最常用的选择器,也是最简单的选择器. $("#test") //选取id为test的元素 $(".test") //选取class为te ...

  5. Spring的Bean内部方法调用无法使用AOP切面(CacheAble注解失效)

    Spring的Bean内部方法调用无法使用AOP切面(CacheAble注解失效) 前言 今天在使用Spring cache的Cacheable注解的过程中遇见了一个Cacheable注解失效的问题, ...

  6. Linux学习记录--文件IO操作相关系统编程

    文件IO操作相关系统编程 这里主要说两套IO操作接口,各自是: POSIX标准 read|write接口.函数定义在#include<unistd.h> ISO C标准 fread|fwr ...

  7. 三、spring cloud 服务提供与调用

    如何使用eureka服务注册中心,搭建一个简单的服务端注册服务,客户端去调用服务使用. 案例中有三个角色:服务注册中心.服务提供者.服务消费者,eureka单机版启动既可,流程是首先启动注册中心,服务 ...

  8. Java的流程控制结构，细节详解

    位运算符 &与 |或 ^异或 <<左移 >>右移 >>>无符号右移  ~取反 注意:位运算是针对整数运算的 int i = 6,j = 10; 方式一 ...

  9. nginx配置(windows配置）

    以下是我的项目用到的一份配置文件#user  nobody;worker_processes  4; #进程数,一般cpu是几核就写多少#error_log  logs/error.log;#erro ...

  10. 翻译：CREATE DATABASE语句

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...