文档章节

全选全不选

solverpeng
 solverpeng
发布于 2016/05/13 13:40
字数 223
阅读 14
收藏 0
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        
        var $items = $(":checkbox[name=items]");
        
        $("#checkedAllBtn").click(function(){
            $items.add("#checkedAllBox").attr("checked",true);
        });
        $("#checkedNoBtn").click(function(){
            $items.add("#checkedAllBox").attr("checked",false);
        });
        $("#checkedRevBtn").click(function(){
            $(":checkbox[name=items]").each(function(){
                this.checked = !this.checked;
            });
            $("#checkedAllBox").attr("checked",($items.filter(":checked").length == $items.length));
        });
        $("#checkedAllBox").click(function(){
            $items.attr("checked",this.checked);
        });
        $items.click(function(){
            $("#checkedAllBox").attr("checked",($items.filter(":checked").length == $items.length));
        });
        $("#sendBtn").click(function(){
            $items.filter(":checked").each(function(){
                alert(this.value);
            });
        });
    });
</script>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选 
        
        <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="checkedAllBtn" value="全 选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反 选" />
        <input type="button" id="sendBtn" value="提 交" />
    </form>
</body>
</html>

 

© 著作权归作者所有

solverpeng

solverpeng

粉丝 11
博文 87
码字总数 40353
作品 0
朝阳
程序员
私信 提问
jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)

ylbtech-jQuery:jQuery学习 jQuery语法实例 复选框应用 效果截图 jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)HTML代码返回顶部 $("#checkedAll").click(funct...

吞吞吐吐的
2017/11/08
0
0
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法

这篇文章主要介绍了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法,通过使用prop方法代替attr方法来解决此问题,需要的朋友可以参考下 本文实例讲述了jQuery中...

码农般的学良
2016/11/25
8
0
JavaScript 基础--- (经典案例)

案例一:全选练习 ** 使用复选框上面一个属性判断是否选中 - checked属性 - checked=true:选中 - checked=false:不选中 创建一个页面 * 复选框和按钮 - 四个复选框表示爱好 - 还有一个复选...

姜白告
2018/08/01
0
0
jquery对table表格的常用操作

一、删除行 ? 1 2 3 4 //删除除第一行外的所有行 $("#table1 tr:not(:first)").remove(); //删除指定行 $("#table1 tr:eq(3)").remove(); 二、删除一列 ? 1 2 3 4 5 //删除除第一列外的所有列......

问题达人
2016/03/31
9
0
JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

JQuery是一个非常容易上手的框架,但是有很多东西需要我们深入学习的。 判断checkbox是否被选中网上有选多种写法,这里有一种方法,个人觉得 比较方便。 因为比较简单,没什么技术含量,直接...

Louis_88
2015/10/07
34
0

没有更多内容

加载失败,请刷新页面

加载更多

采坑指南——k8s域名解析coredns问题排查过程

正文 前几天,在ucloud上搭建的k8s集群(搭建教程后续会发出)。今天发现域名解析不了。 组件版本:k8s 1.15.0,coredns:1.3.1 过程是这样的: 首先用以下yaml文件创建了一个nginx服务 apiV...

码农实战
18分钟前
2
0
【2019年8月版本】OCP 071认证考试最新版本的考试原题-第6题

choose three Which three statements are true about indexes and their administration in an Orade database? A) An INVISIBLE index is not maintained when Data Manipulation Language......

oschina_5359
20分钟前
2
0
阿里巴巴开源 Dragonwell JDK 最新版本 8.1.1-GA 发布

导读:新版本主要有三大变化:同步了 OpenJDK 上游社区 jdk8u222-ga 的最新更新;带来了正式的 feature:G1ElasticHeap;发布了用户期待的 Windows 实验版本 Experimental Windows version。...

阿里巴巴云原生
26分钟前
1
0
教你玩转Linux—磁盘管理

Linux磁盘管理好坏直接关系到整个系统的性能问题,Linux磁盘管理常用三个命令为df、du和fdisk。 df df命令参数功能:检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少...

xiangyunyan
28分钟前
3
0
js 让textarea的高度自适应父元素的高度

textarea按照普通元素设置height是没有作用的,可以这么来设置, 下面给上一段项目代码 JS代码: $.fn.extend({ txtaAutoHeight: function () { return this.each(function () {...

文文1
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部