文档章节

小博老师演示常用JQuery效果 ——复选框全选和反选效果

博为峰教研组
 博为峰教研组
发布于 2016/11/18 09:52
字数 498
阅读 32
收藏 0
点赞 0
评论 0

[理论知识]

我们在实际开发应用程序的过程中,经常会遇到复选框全选和反选的效果需求,本文小博老师就为大家演示一下,如何使用JQuery框架实现复选框全选反选的效果。

[步骤解读一]界面布局

首先我们创建一个HTML页面,核心代码如下:

<body>

 

<div align="center" id="div_document">

     <div align="left" id="div_document_content">

<table align="center" border="1px" cellpadding="2px" cellspacing="2px">

         <tr>

             <td><input type="checkbox" id="cbxAll" /></td>

                <td>课程名称</td>

                <td>课程时间</td>

            </tr>

            <tr>

             <td><input type="checkbox" name="cbxGroup" /></td>

                <td>JavaSE标准版</td>

                <td>160课时</td>

            </tr>

            <tr>

             <td><input type="checkbox" name="cbxGroup" /></td>

                <td>JavaWeb设计</td>

                <td>96课时</td>

            </tr>

            <tr>

             <td><input type="checkbox" name="cbxGroup" /></td>

                <td>SQL结构化数据库</td>

                <td>48课时</td>

            </tr>

            <tr>

             <td><input type="checkbox" name="cbxGroup" /></td>

                <td>JavaEE标准版</td>

                <td>256课时</td>

            </tr>

            <tr>

             <td><input type="checkbox" name="cbxGroup" /></td>

                <td>Android应用</td>

                <td>128课时</td>

            </tr>

            <tr>

             <td><input type="checkbox" name="cbxGroup" /></td>

                <td>就业辅导专题</td>

                <td>32课时</td>

            </tr>

        </table>

     </div>

    </div>

 

</body>

使用浏览器访问,看到页面布局效果如下:

 

 小博老师演示JQuery复选框全选和反选效果

[步骤解读二]添加全选反选效果

为了让用户选择选项更加方便,我们把最上边的复选框作为功能型复选框,当用户选中它时,所有的课程都自动选中,当用户取消它的选中属性后,所有的课程自动取消选中属性。

我们为页面增加javascript代码,核心代码如下:

<script src="script/jquery-1.4.2.min.js"></script>

<script>

$(document).ready(function(){

// 为 功能复选框添加点击事件

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

// 将所有课程复选框的选中属性 设置成与功能复选框的选中属性一致

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

});

});

</script>

通过浏览器访问,现在我们看到功能复选框的全选和反选效果就实现了:

 

 小博老师演示JQuery复选框全选和反选效果

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 49
博文 1224
码字总数 479077
作品 0
黄浦
程序员
Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵 ⋅ 昨天 ⋅ 0

jquery.jqzoom.js图片放大镜

看了京东的商品详情页的放大效果不错,然后自己也想扒拉扒拉,无奈某些网站的插件要会员充值收费,特此将搞到的干货晒出来,方便各位有需要人事。话不多说,看正文! 正文分割线——————...

anlve ⋅ 06/10 ⋅ 0

jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge ⋅ 05/19 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 06/18 ⋅ 0

前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆 ⋅ 06/14 ⋅ 0

Jquery实现京东tab切图

主要是用jquery实现tab切换,显示不同的内容。也可以用原生js实现,但是实现方式比较繁琐,这里暂时不写原生js实现。jquery相对代码少而且易于理解。 这里用了三种方式实装,在写的时候,发现...

Mrs_CoCo ⋅ 05/07 ⋅ 0

JavaWeb04-HTML篇笔记(三)

1.1 案例二:表格隔行换色的案例:1.1.1 需求: 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 基本过滤选择器: 如果样式...

我是小谷粒 ⋅ 05/08 ⋅ 0

jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)

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

吞吞吐吐的 ⋅ 2017/11/08 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

一个女生对BootStrap的感情

首先说明一下,姐我不是很聪明,但是也做设计,也做前端,同时在移动互联网行业中也混了多年,感触颇多,打算开始记录一下脚步,希望对后来的小弟弟×××们有那么一点帮助,也算一件高兴的事...

BootStrap之路 ⋅ 04/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 32分钟前 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 45分钟前 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 58分钟前 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

vim编辑模式、vim命令模式、vim实践

vim编辑模式 编辑模式用来输入或修改文本内容,编辑模式除了Esc外其他键几乎都是输入 如何进入编辑模式 一般模式输入以下按键,均可进入编辑模式,左下角提示 insert(中文为插入) 字样 i ...

蛋黄Yolks ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部