文档章节

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

博为峰教研组
 博为峰教研组
发布于 2016/11/18 09:52
字数 498
阅读 32
收藏 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复选框全选和反选效果

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
使用jQuery设置元素选中的问题及解决办法

现在界面操作的js脚本很多人都是使用的jquery了吧,这其中就有很多的什么控制checkbox的选中与不选中啊什么的(特别是这个在做“全选”的时候很有用),还有就是某些时候的多选模式下的selec...

阿信sxq
2015/06/01
0
0
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
0
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
jquery版本间兼容性:checkbox选中状态

最近在学习Jquery,发现attr不太好用,从网上搜了下终于知道其原因,记下备查。 以下为以为网友在js贴吧的内容: 以<input type="checkbox" id="all"/>为例子取值的例子 $("#all").attr("ch...

北方攻城师
2014/08/05
0
0
jQuery图像照片剪裁插件Jcrop

Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能。 特点: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 minSize / maxSize设置 ...

Junn
2013/09/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
2
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
7
3
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
4
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
2
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部