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

时间 2019-11-11

标签老师演示经常使用 jquery 效果复选框全选栏目 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>设计

</tr>

<tr>

<td>JavaSE标准版</td>

</tr>

<tr>

<td>JavaWeb设计</td>

</tr>

<tr>

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

</tr>

<tr>

<td>JavaEE标准版</td>

</tr>

<tr>

<td>Android应用</td>

</tr>

<tr>

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

</tr>

</table>

</div>

</body>

使用浏览器访问，看到页面布局效果以下：

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

为了让用户选择选项更加方便，咱们把最上边的复选框做为功能型复选框，当用户选中它时，全部的课程都自动选中，当用户取消它的选中属性后，全部的课程自动取消选中属性。

咱们为页面增长javascript代码，核心代码以下：

$(document).ready(function(){

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

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

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

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

});

</script>

经过浏览器访问，如今咱们看到功能复选框的全选和反选效果就实现了：