<!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. Almost Sorted Array

    http://acm.hdu.edu.cn/contests/contest_showproblem.php?cid=646&pid=1006 #include<iostream> ...

  2. caffe配置python环境

    make pycaffe 在python中import caffe

  3. 2016.8.14 HTML5重要标签以及属性学习

    1.响应网格系统,这使得它很容易把元素放在行,并指定每个元素的相对宽度 . 要注意的是: 在使用网格布局系统之前,要不把布局的元素都添加到同一个<div>中,而且这个<div> ...

  4. 《DSP using MATLAB》为什么要z变换？

    书中截图

  5. [自动运维]ant脚本打包，上传文件到指定服务器，并部署

    1.根节点使用,表示根目录为当前目录,默认启动的target为build,项目名称为othersysm, <project basedir="." default=" ...

  6. 使用dSYM分析App崩溃日志

    前言 我们在开发App过程中,因为连接到控制台,所以遇到问题会很容易找到问题代码.但是对于线上的App出现Crash的时候,我们不可能通过这种方式,也不现实,所以我们只能通过收集Crash信息,来解决 ...

  7. get请求

    写在前面的话 XMLHttpRequest对象的open方法的第一个参数为request-type,取值可以为get或post.本篇介绍get请求. get请求的目的,主要是为了获取数据.虽然get请 ...

  8. apache htpasswd.exe创建密码

    一.使用apache htpasswd.exe创建密码文件,命令请看PHP推荐教程:apache htpasswd命令用法详解 apache htpasswd命令用法实例 1.如何利用htpasswd ...

  9. BZOJ3934 : [CQOI2015]标识设计

    轮廓线插头DP. 设$f[i][j][a][b][c][d][e]$表示考虑到了$(i,j)$,轮廓线上3个下插头的位置分别为$a,b,c$,是否有右插头,已经放了$e$个$L$的方案数. 然后直接D ...

  10. pig相关

    1. 重命名pig job name: 在Pig脚本中的一开始处,写上这一句: set job.name 'This is my job'; 2. 设置pig参数: 允许pig时,输入如下: pig ...