jquery学习——使用jq完成复选框的全选和全不选

会飞的咸鱼 会飞的咸鱼     2022-09-16     117

关键词:

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()来替代(在各个版本都适用)。

jquerycheckbox的全选和全不选

刚学Jquery,在做checkbox的全选全不选时遇到了一个问题,使用attr()方法的话,只能成功全选和取消全选一次,第二次就不行了,如下面$("#chkAll").click(function(){if(this.checked==true){$("#tabinput[type=‘checkbox‘]").attr("checked",true);}else{$("#tabi... 查看详情

js实现checkbox的全选和全不选功能

html代码:<formname="form1"method="post"action="manage.php?act=sub"><inputtype="checkbox"name="mm[]"value="<?=$row[‘0‘]?>"onClick="checkAll(this,‘mm‘)"><!--checkbox实现选择多条记录-->< 查看详情

前端小demo——全选和全不选

...者全不选,或者其中任意一件单品单选的效果。点击顶部复选框实现全选列表中任意一项未选中,顶部复选框就是未选中的状态<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>*{padding:0;... 查看详情

javascript实现全选和全不选

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <script> functionselectAll(num){ //获取下面的四个复选框 varres=document.getElementsByClassN 查看详情

jq——选择器的应用(表格的隔行换色全选和全不选)(代码片段)

...;);</script>用到了选择器和对属性的设置,使得下面的复选框与第一个保持一致。(2)效果演示:  3、完整代码:(1)隔行换色:<html><head><metacharset="utf-8"><title>成绩登记表格</title><scripttype="te... 查看详情

26.jquery全选和全不选

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> 查看详情

react全选和全不选

状态:this.state={check:false,checks:false,}js:showInput=(e)=>{//全选和全不全console.log(e.target.checked);this.setState({check:e.target.checked,checks:e.target.checked,})}render()<Fragment><divsty 查看详情

jquery版的全选,全不选和反选

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery.js"type="text/javascript"charset="utf-8"></script> <title></title> </head& 查看详情

jquery实现复选框全选全不选反选问题解析

  今天打算用jQuery实现一下复选框的全选、全不选和反选问题,刚开始用的是attr("checked",true/false)方法,发现只能在最开始实现一次全选,可以实现全不选,无法实现反选,总之调试了好久死活得不到想要的效果。最后发现,j... 查看详情

jquery案例二:实现全选全不选和反选(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>全选和全不选以及反选</title><scriptsrc="../js/jquery-1.8.3.js"></script><script>$(function()//全选事件$(" 查看详情

jquery实现复选框的全选反选和不选功能

 <!doctypehtml><html><head><metacharset="utf-8"><title>jQuery实现复选框的全选、反选和不选功能</title><scripttype="text/javascript"src="jquery-1.11.3.min.js"></script& 查看详情

jquery实现复选框的全选,全不选,反选

<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>   <styletype="text/css"> .mytable  width:300px;  .my 查看详情

vue2.0实现全选和全不选(代码片段)

实现思路:1、v-model一个收集所有input(除全选框外)数组checkModel,vue会动态将其checked为true的input的value值存入数组checkModel里2、watch函数来监听checkModel属性,当其长度==input元素时全选按钮选中否则取消3、全选按钮v-modelchecked属... 查看详情

jquery复选框的全选全不选及选择所有复选框实现全选的复选框

Jquery代码$(function()$(":checkbox.parentfunc").click(function()//如何获取被点击的那个复选框$(this).parent().parent().next().find(":checkbox").prop("checked",this.checked););$(":checkbox:not(.parentfunc)").click( 查看详情

jquery实现复选框的全选与全不选

对于复选框的选中checked属性,实在是无力吐槽。从上图可以看出,当复选框不设置checked属性时,默认没有被选中;其它三种情况,设置checked属性但不设置属性值即置空,或者将checked属性值设为true/false,都是默认被选中。我们... 查看详情

javaweb03-html篇笔记

1.1案例五:使用JS完成复选框的全选和全不选的效果1.1.1需求:在实际的开发中一条记录一条记录进行删除的话,效率很低,有的时候需要一起删除多条记录.需要通过在表格之前设置一个复选框的形式进行勾选复选框.点击一个删... 查看详情

多选框checkbox全选全不选和反选

在判断多选框中的某一个是否被选中时,我们可以用checked的属性选中了就返回true,没被选中就返回false;这是html代码:<formaction="#"><labelfor="hobby">爱好:</label><labelfor="hobby1"><inputtype="checkbox"name="hobby"id="hobby1 查看详情

jquery实现的全选反选和不选功能

...们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮。<ulid="list"><li><label><inputtype="checkbox"value="1">1.时间都去哪儿了</label></li><li><label><... 查看详情