文档章节

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

博为峰教研组
 博为峰教研组
发布于 2016/11/18 09:52
字数 498
阅读 34
收藏 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
10 款基于 jQuery 的切换效果插件推荐

本文整理了 10 款非常好用的jQuery切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换。 1. InnerFade 这是一个基于jQuery的小插件,可以实现页面内的元素淡入...

红薯
2011/12/15
1K
2
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
10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1. 右击菜单 一个创建右击菜单的插件,简洁且易...

红薯
2011/12/20
3.9K
4

没有更多内容

加载失败,请刷新页面

加载更多

1个开发如何撑起一个过亿用户的小程序

本文由云+社区发表 2018年12月,腾讯相册累计用户量突破1亿,月活1200万,阿拉丁指数排行 Top 30,已经成为小程序生态的重量级玩家。 三个多月来,腾讯相册围绕【在微信分享相册照片】这一核...

腾讯云加社区
14分钟前
1
0
golang ssh包使用方法介绍

在使用gexpect包发现很多问题之外,这里又尝试使用ssh user@127.0.0.1的思路进行用户切换。这里记录下具体的使用方法,遇到的ssh: must specify HostKeyCallback 问题的解法方法及最终使用过...

linuxprobe16
19分钟前
0
0
layer

Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染,不可点击的解决办法 layer 实现弹窗提交信息 function confirmUpdateAward(i) { layer.open({ ...

mickelfeng
今天
1
0
Spring boot中如何获取profiles环境

  实现ApplicationContextAware @Componentpublic class QiNiuPropertiesConfig implements ApplicationContextAware { /// 获取当前环境public String getActiveProfile() { ret......

writeademo
今天
4
0
机器学习中的End-to-End到底是怎么回事?

简单讲就是,Input--->系统(这里指神经网络)--->Output(直接给出输入,NN神经网络就给出结果,一气喝成!!!) 借用一段对话:(http://dy.163.com/v2/article/detail/C3J6F2NJ0511AQHO....

火力全開
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部