checkBox的使用：

<!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 runat="server">

    <title></title>

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

    <script type="text/javascript">

        $(function () {

            // 全选

            $("#btnCheckAll").bind("click", function () {

                $("[name = chkItem]:checkbox").attr("checked", true);

            });

            // 全不选

            $("#btnCheckNone").bind("click", function () {

                $("[name = chkItem]:checkbox").attr("checked", false);

            });

            // 反选

            $("#btnCheckReverse").bind("click", function () {

                $("[name = chkItem]:checkbox").each(function () {

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

                });

            });

            // 全不选

            $("#btnSubmit").bind("click", function () {

                var result = new Array();

                $("[name = chkItem]:checkbox").each(function () {

                    if ($(this).is(":checked")) {

                        result.push($(this).attr("value"));

                    }

                });

                alert(result.join(","));

            });

        });

    </script>

</head>

<body>

    <div>

        <input name="chkItem" type="checkbox" value="今日话题" />今日话题

        <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点

        <input name="chkItem" type="checkbox" value="财经" />财经

        <input name="chkItem" type="checkbox" value="汽车" />汽车

        <input name="chkItem" type="checkbox" value="科技" />科技

        <input name="chkItem" type="checkbox" value="房产" />房产

        <input name="chkItem" type="checkbox" value="旅游" />旅游

    </div>

    <div>

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

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

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

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

    </div>

</body>

</html>

checkBox 全选、全不选、反选的更多相关文章

  1. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  2. Android 带checkbox的listView 实现多选，全选，反选

    由于listview的一些特性,刚开始写这种需求的功能的时候都会碰到一些问题,重点就是存储每个checkbox的状态值,在这里分享出了完美解决方法:     布局文件: [html]   <?x ...

  3. 【转】Android 带checkbox的listView 实现多选，全选，反选 -- 不错

    原文网址:http://blog.csdn.net/onlyonecoder/article/details/8687811 Demo地址(0分资源):http://download.csdn.net ...

  4. 【转】Android 带checkbox的listView 实现多选，全选，反选----解决checkbox错位问题

    原文网址:http://blog.csdn.net/onlyonecoder/article/details/8687811 Demo地址(0分资源):http://download.csdn.net ...

  5. Jquery 利用单个复选款（checkbox）实现全选、反选

    1 <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").clic ...

  6. 全选，不选，反选 jquery

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

  7. jquery 全选 全不选 反选

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...

  8. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  9. Jq 遍历 全选 全不选 反选

    //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...

  10. JS实现全选、不选、反选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

随机推荐

  1. ubuntu - 14.04，安装VirtualBox 5.0（虚拟机软件）！

    VirtualBox是一款免费.开源的虚拟机软件,可以运行在多种操作系统上,真的是一款值得我们使用的虚拟机软件! 官方网址:https://www.virtualbox.org/ ubuntu14.0 ...

  2. 自定义Mybatis框架

    项目结构:      https://files-cdn.cnblogs.com/files/mkl7/ownMybatis.zip 1. 创建maven工程并引入坐标: <?xml versi ...

  3. (转)Haar-like矩形遍历检测窗口演示Matlab源代码

    from:http://blog.sina.com.cn/s/blog_736aa0540101kzqb.html clc; clear; close all; % Haar-like特征矩形计算 b ...

  4. Kafka学习文档

    本教程假定您是一只小白,没有Kafka 或ZooKeeper 方面的经验. Kafka脚本在Unix和Windows平台有所不同,在Windows平台,请使用 bin\windows\ 而不是bin/ ...

  5. [SinGuLaRiTy] 2017-07-21 综合性测试

    [SinGuLaRiTy-1028] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有题目:Time Limit: 1s | Memo ...

  6. JBOSS AS 性能调整优化

    1 减少日志的输出量 *\jboss-4.2.3.GA\server\default\conf\jboss-log4j.xml 根据不同的日志级别:一共有5个等级,越往下输出的东西越详细.一般没什么特 ...

  7. City Game UVALive - 3029（悬线法求最大子矩阵）

    题意:多组数据(国外题好像都这样),每次n*m矩形,F表示空地,R表示障碍 求最大子矩阵(悬线法模板) 把每个格子向上延伸的空格看做一条悬线 以le[i][j],re[i][j],up[i][j]分别 ...

  8. linux中tomcat内存溢出

    刚开始测试服务器与线上后台都不能上传10分钟以上的视频,后来只要是视频就不能上传,进入服务器查日志得到如下错误: Caused by: java.lang.OutOfMemoryError: Java ...

  9. visio 使用技巧汇总

    1.visio中图形旋转任意角度的方法 视图----任务窗格----大小与位置----角度 2.箭头形状 更多形状---流程图----箭头形状 3.汇制虚线框 从基本形状中拖出一个矩形,右击矩形,选择 ...

  10. 移动性能测试 | 持续集成中的 Android 稳定性测试

    前言 谈到Android稳定测试,大多数会联想到使用monkey工具来做测试.google官方提供了monkey工具,可以很快速点击被应用,之前我有一篇帖子提到了monkey工具的使用,详见: htt ...