小博老师演示经常使用JQuery效果 ——复选框全选和反选效果
[理论知识]javascript
咱们在实际开发应用程序的过程当中，常常会遇到复选框全选和反选的效果需求，本文小博老师就为你们演示一下，如何使用JQuery框架实现复选框全选和反选的效果。java
[步骤解读一]界面布局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">this
<tr>spa
<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>
使用浏览器访问，看到页面布局效果以下：
为了让用户选择选项更加方便，咱们把最上边的复选框做为功能型复选框，当用户选中它时，全部的课程都自动选中，当用户取消它的选中属性后，全部的课程自动取消选中属性。
咱们为页面增长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>
经过浏览器访问，如今咱们看到功能复选框的全选和反选效果就实现了：
- 1. 小博老师演示经常使用JQuery效果 ——图片轮播
- 2. jQuery实现全选效果
- 3. 复选框的使用，全选效果的实现
- 4. 使用 jquery 实现 checkbox “全选/全不选” 效果
- 5. JS实现全选、不选和反选效果
- 6. [作特效, 学JS] -- 06 复选框全选/全不选/反选
- 7. jquery实现全选反选批量删除效果
- 8. 用Imageview实现复选框效果
- 9. 不用checkbox 单选全选 效果
- 10. 分别用js和jq实现百度全选反选效果
- 更多相关文章...
- • ionic 复选框 - ionic 教程
- • SVG 模糊效果 - SVG 教程
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
- • 常用的分布式事务解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。