分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

jQuery学习(五)——使用JQ完成复选框的全选和全不选

发布时间:2023-09-06 01:06责任编辑:沈小雨关键词:jQuery

1、在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选

步骤分析:

第一步:引入jquery文件

第二步:书写页面加载函数

第三步:为上面的复选框绑定单击事件

第四步:将下面所有的复选框的选中状态设置成跟上面的一致!

2、具体代码实现:

 1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title>使用jQuery完成复选框的全选和全不选</title> 6 ????????<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 7 ????????<script> 8 ????????????$(function(){ 9 ????????????????$("#select").click(function(){10 ????????????????????//获取下面所有的复选框并将其选中状态设置跟编码的前端复选框保持一致11 ????????????????????//attr的方法与JQ的版本有关,在1.8.3及以下有用12 ????????????????????//$(".selectOne").attr("checked",this.checked);13 ????????????????????$(".selectOne").prop("checked",this.checked);14 ????????????????});15 ????????????});16 ????????</script>17 ????</head>18 ????<body>19 ????????<table border="1" width="500" height="50" align="center" id="tbl" >20 ????????????<thead>21 ????????????????<tr>22 ????????????????????<td colspan="4">23 ????????????????????????<input type="button" value="添加" />24 ????????????????????????<input type="button" value="删除" />25 ????????????????????</td>26 ????????????????</tr>27 ????????????????<tr>28 ????????????????????<th><input type="checkbox" id="select"></th>29 ????????????????????<th>编号</th>30 ????????????????????<th>姓名</th>31 ????????????????????<th>年龄</th>32 ????????????????</tr>33 ????????????</thead>34 ????????????<tbody>35 ????????????????<tr >36 ????????????????????<td><input type="checkbox" class="selectOne"/></td>37 ????????????????????<td>1</td>38 ????????????????????<td>张三</td>39 ????????????????????<td>22</td>40 ????????????????</tr>41 ????????????????<tr >42 ????????????????????<td><input type="checkbox" class="selectOne"/></td>43 ????????????????????<td>2</td>44 ????????????????????<td>李四</td>45 ????????????????????<td>25</td>46 ????????????????</tr>47 ????????????????<tr >48 ????????????????????<td><input type="checkbox" class="selectOne"/></td>49 ????????????????????<td>3</td>50 ????????????????????<td>王五</td>51 ????????????????????<td>27</td>52 ????????????????</tr>53 ????????????????<tr >54 ????????????????????<td><input type="checkbox" class="selectOne"/></td>55 ????????????????????<td>4</td>56 ????????????????????<td>赵六</td>57 ????????????????????<td>29</td>58 ????????????????</tr>59 ????????????????<tr >60 ????????????????????<td><input type="checkbox" class="selectOne"/></td>61 ????????????????????<td>5</td>62 ????????????????????<td>田七</td>63 ????????????????????<td>30</td>64 ????????????????</tr>65 ????????????????<tr >66 ????????????????????<td><input type="checkbox" class="selectOne"/></td>67 ????????????????????<td>6</td>68 ????????????????????<td>汾九</td>69 ????????????????????<td>20</td>70 ????????????????</tr>71 ????????????</tbody>72 ????????</table>73 ????</body>74 </html>

注意:attr在jquery1.11版本不适用,采用prop()来替代(在各个版本都适用)。

jQuery学习(五)——使用JQ完成复选框的全选和全不选

原文地址:http://www.cnblogs.com/cxq1126/p/7425606.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved