<!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></title>

 <!--   引入jQuery -->

<script src="http://libs.baidu.com/jquery/1.3.1/jquery.js" type="text/javascript"></script>

 <script type="text/javascript">

  $(function(){

     //全选

     $("#CheckedAll").click(function(){

         $('[name=items]:checkbox').attr('checked', true);

     });

     //不选

     $("#CheckedNo").click(function(){

        $('[type=checkbox]:checkbox').attr('checked', false);

     });

     //反选

     $("#CheckedRev").click(function(){

          $('[name=items]:checkbox').each(function(){

            this.checked=!this.checked;

          });

     });

     //输出值

    $("#send").click(function(){

        var str="你选中的是：\r\n";

        $('[name=items]:checkbox:checked').each(function(){

            str+=$(this).val()+"\r\n";

        })

        alert(str);

    });

  })

  </script>

</head>

<body>

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

   你爱好的运动是？

   <br/>

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

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

    <input type="checkbox" name="items" 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>

全选，不选，反选 jquery的更多相关文章

  1. jQuery实现获取选中复选框的值

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Jq ...

  2. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  3. WPF: 实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图:     这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...

  4. QTableWidget自定义表头QHeaderView加全选复选框

    1         QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...

  5. ExtJS中，将Grid表头中的全选复选框取消复选

    今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...

  6. WPF实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中 ...

  7. jQuery - 选中复选框则弹出提示框

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 原生JS实现购物车全选多选按钮功能

    对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...

  9. 原生js实现在表格用鼠标框选并有反选功能

    今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能.要我用原生js写,由于没什么经验翻阅了很多资料,第一次写文章希望各位指出不足!! 上来先建表 <div clas ...

  10. JS实现页面table鼠标移动改变tr行颜色，单击tr选中复选框功能

    JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...

随机推荐

  1. 偷师--先留着。。ssh，nginx，防火墙相关命令

  2. hbase伪分布式安装（转）

    原文地址:http://blog.csdn.net/yonghutwo/article/details/24555103 本机环境: ubuntu 12.4 Hadoop 1.1.2 安装hbase版 ...

  3. 【maven】 pom.xml详解

    pom.xml详解 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  4. 【maven】 在 MyEcplise上使用maven搭建Web项目

    二.在My Ecplise上使用Maven搭建Web项目 1.新建一个maven项目   2.create一个简单的骨架 3.就像在ecplise中一样设置项目的以下配置   4.新创建的项目结构如下 ...

  5. 【转】HBase原理和设计

    简介 HBase —— Hadoop Database的简称,Google BigTable的另一种开源实现方式,从问世之初,就为了解决用大量廉价的机器高速存取海量数据.实现数据分布式存储提供可靠的方 ...

  6. 分享Kali Linux 2016.2第46周虚拟机

    分享Kali Linux 2016.2第46周虚拟机该虚拟机使用Kali Linux 2016.2第46周的64位镜像安装.桌面为Gnome模式.该虚拟机配置如下:(1)支持VMWare 9以上的版本 ...

  7. php函数获取文件名

    <?php // php 获取  文件名 function getExt($url){ $arr = parse_url($url); // URL 字符串予以解析,并将结果返回数组中 //pr ...

  8. Java基础语法的学习

    首先就是关于枚举类型的思考与实践,这个是在jdk5.0及以后的版本才有的,然后对枚举类型进行动手操作. 源代码: package test; public class EnumTest { publi ...

  9. Bestcoder round #65 && hdu 5592 ZYB's Premutation 线段树

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Submissio ...

  10. IE下Array.prototype.slice.call(params,0)

    i8 不支持 Array.prototype.slice.call(params,0) params可以是 HTMLCollection.类数组.string字符串