jquery 操作checkbox的例子(全选,反选,获取选取值...)

最新推荐文章于 2021-05-18 11:01:58 发布
最新推荐文章于 2021-05-18 11:01:58 发布
阅读量840 收藏 1
点赞数
分类专栏： asp.net js 技巧 文章标签： jquery input function button stylesheet javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hinsxun/article/details/5799683
版权
asp.net 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
js
8 篇文章 0 订阅
订阅专栏
技巧
7 篇文章 0 订阅
订阅专栏

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
 2  < HTML > 
 3    < HEAD > 
 4     < TITLE >  New Document  </ TITLE > 
 5     < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   /> 
 6     < link  href ="css/ingrid.css"  rel ="stylesheet"  type ="text/css" > 
 7  < script  language ="JavaScript"  src ="jquery-1.2.3.pack.js"  type ="text/javascript" ></ script > 
 8      < SCRIPT  LANGUAGE ="JavaScript" >  
 9     <!-- 
10         $( " document " ).ready( function ()  {
11            
12          $( " #btn1 " ).click( function ()  {
13             
14            $( " [name='checkbox'] " ).attr( " checked " , ' true ' ); // 全选 
15          
16         } )
17          $( " #btn2 " ).click( function ()  {
18             
19            $( " [name='checkbox'] " ).removeAttr( " checked " ); // 取消全选 
20          
21         } )
22          $( " #btn3 " ).click( function ()  {
23             
24            $( " [name='checkbox']:even " ).attr( " checked " , ' true ' ); // 选中所有奇数 
25          
26         } )
27          $( " #btn4 " ).click( function ()  {
28             
29             $( " [name='checkbox'] " ).each( function ()  {
30                
31              
32                 if ($( this ).attr( " checked " ))
33                 {
34                  $( this ).removeAttr( " checked " );
35                  
36              } 
37               else 
38                 {
39                  $( this ).attr( " checked " , ' true ' );
40                  
41              } 
42              
43            } )
44          
45         } )
46           $( " #btn5 " ).click( function ()  {
47          var  str = "" ;
48             $( " [name='checkbox'][checked] " ).each( function ()  {
49                str += $( this ).val() + " /r/n " ;
50            } )
51           alert(str);
52         } )
53        } )
54     // --> 
55     </ SCRIPT > 
56    
57    </ HEAD > 
58  
59    < BODY > 
60    < form  name ="form1"  method ="post"  action ="" > 
61      < input  type ="button"  id ="btn1"  value ="全选" > 
62      < input  type ="button"  id ="btn2"  value ="取消全选" > 
63      < input  type ="button"  id ="btn3"  value ="选中所有奇数" > 
64      < input  type ="button"  id ="btn4"  value ="反选" > 
65      < input  type ="button"  id ="btn5"  value ="获得选中的所有值" > 
66      < br > 
67      < input  type ="checkbox"  name ="checkbox"  value ="checkbox1" > 
68     checkbox1
69      < input  type ="checkbox"  name ="checkbox"  value ="checkbox2" > 
70     checkbox2
71      < input  type ="checkbox"  name ="checkbox"  value ="checkbox3" > 
72     checkbox3
73      < input  type ="checkbox"  name ="checkbox"  value ="checkbox4" > 
74     checkbox4
75      < input  type ="checkbox"  name ="checkbox"  value ="checkbox5" > 
76     checkbox5
77      < input  type ="checkbox"  name ="checkbox"  value ="checkbox6" > 
78     checkbox6
79      < input  type ="checkbox"  name ="checkbox"  value ="checkbox7" > 
80     checkbox7
81      < input  type ="checkbox"  name ="checkbox"  value ="checkbox8" > 
82   checkbox8
83    </ form > 
84  
85    </ BODY > 
86  </ HTML >


87 

（）

< script type = "text/javascript" > 
$( document ). ready (function() { 
     $( "#selectAll" ). click ( function() { 
         $( ":checkbox" ). each ( function() { $( this ). attr ( "checked" , "true" ); }) 
     }); 
     $( "#selectOther" ). click ( function() { 
         $( ":checkbox" ). each ( function() { $( this ). attr ( "checked" ,! this . checked ); }) 
     }); 
}); 
</script>

<body> 
<input type="checkbox" name="cb" value ="box1">box1 
<input type="checkbox" name="cb" value ="box2">box2 
<input type="checkbox" name="cb" value ="box3">box3 
<input type="button" value="全选" id="selectAll"> 
<input type="button" value="反选" id="selectOther"> 
</body>

hinsxun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JQuery 实现复选框全选反选功能
LOVE_HopeOne的博客
08-01 686
  HTML部分 &lt;body&gt; &lt;input type="checkbox" name="fu"&gt;全选(父)&lt;br&gt; &lt;input type="checkbox" name="zi"&gt;子1&lt;br&gt; &lt;input type="checkbox" name=
关于checkbox的全选和反选实例
weixin_30530339的博客
08-25 101
<script type="text/javascript"> $(function () { $("#checkAll").click(function () {//点击全选 var allLength = $(":checkbox[id!='checkAll']").length; //复选框的个数 ...
JavaScript学习笔记之js实现复选框checkbox的全选、反选示例
manman的分享
07-10 968
1.选中全选复选框，则其他的复选框自动全部选中； 2.已选中全选复选框，再次点击全选复选框，则其他复选框全部不选中； 3.当全部其他复选框都被选中时，全选复选框自动被选中； 4.当全部其他复选框没有被全部选中时，全选复选框不被选中。
jquery实现复选框的全选和反选
江南的代码日记
09-25 305
jquery实现复选框的全选和反选 复选框的全选反选一般使用.attr(“checked”, “true”)或 .prop(“checked”, “true”)，但经试验，.attr在进行一次全选和反选后就失效了，而.prop不存在这个问题，你可以自己去尝试。 html代码： &amp;lt;input type=&quot;checkbox&quot; class=&quot;cb_All&quot;/&amp;gt;全选/反选 &amp;l
jQuery对复选框的全选，全不选，反选等的操作
mine_song的博客
01-20 502
资源名称 全选      反选   $(function(){ //全选 $("#all").click(function(){ //将下面所有组件全
用Jquery实现checkbox的反选、全选、全不选
qq_38184559的博客
07-19 225
当我们在用js来实现web端操作的时候，多选框的全选、全不选和反选是最常用的功能，尤其是当数据量大的时候就需要这样的批量操作来给用户带来方便、快捷的服务了。        下面我们就来用jQuery实现checkbox多选框的全选、全不选、反选的功能：         假设有4个checkbox多选框，他们包含在一个id=“chk”的div中，而全选、全不选、反选的button按钮所在
Jquery实现checkbox的全选、反选功能代码
黎陶宏
06-26 822
1、引入Jquery的js2、添加js        $(document).ready(function() {                //全选                $("#checkAll").click(function() {                    if(!$(this).attr("checked")) {                    
复选框checkBox取值的三种方法
09-29 4709
<head> <meta charset="UTF-8"> <title>checkBox</title> <!--引入jquery文件--> <script type="text/javascript"src="jquery-1.8.3.min.js"></script> <script> //获取复选框参数方法. 第一种 ...
jQuery实现复选框全选、全不选、反选问题解析
我的笔记
05-28 1794
　今天打算用jQuery实现一下复选框的全选、全不选和反选问题，刚开始用的是attr("checked",true/false)方法，发现只能在最开始实现一次全选，可以实现全不选，无法实现反选，总之调试了好久死活得不到想要的效果。最后发现，jquery 1.7.2之前支持attr对固有属性的操作，后面的版本只能用prop了。详细了解jQuery中attr()和prop()的区别，请点击参考。　　下...
jquery实现复选框全选、反选
姚家威的博客
05-18 2930
HTML: <input id="all" type="checkbox" value="" /> <label for="all">全选</label> <input id="fan" type="checkbox" value="" /> <label for="fan">反选</label> <button id="getValue">获得所有选中值</button> <ul class="lis
jquery复选框的一键全选和反选
qq_32718869的博客
06-08 1594
代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="../js/jquery-3.3.1.min.js"&gt;&lt;/script&amp
jQuery实现复选框的全选和全不选
热门推荐
刘鹏博的博客
02-03 2万+
jQuery实现复选框的全选和全不选 效果如图： 代码如下： jQuery实现复选框的全选和全不选 全选 复选框1 复选框2 复选框3 复选框4 复选框5 $('input[name="checkall"]').on("click",function(){ if($(this).is(
jQueryCheckbox实现全选反选全部选
lyy747425777的博客
11-15 7844
代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="jquery-1.8.0.min.js"&
jQuery实现复选框全选反选
Alfred_tfk的博客
09-02 812
jQuery实现全选反选 html代码 <body> <input type="checkbox" /> <input type="button" value="全选中" /> <input type="button" value="全不选" /> <input type="button" value="反选" /> <input type="button" value="输出选中项" /> <hr /&g
jQuery中复选框checkbox实现复选框的全选/全不选，点击按钮实现复选框的全选/全不选/反选
知来者犹可追
11-29 2363
&amp;lt;table&amp;gt; &amp;lt;tr&amp;gt; &amp;lt;td&amp;gt; &amp;lt;input type=&quot;checkbox&quot; name=&quot;check&quot; /&amp;gt;1 &amp;lt;input type=&quot;checkbox&quot; nam
JQuery 实现复选框的全选、反选、全不选
刘远的编程技术博客
06-28 2307
添加多个复选框 ，三个按钮， 再用JQuery为其添加单击事件&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;script src="Scripts/jquery-1
JS利用复选框实现全选和反选
big_data1的博客
01-17 1万+
需求： A.全选： 点击全选，所有选项被选中； B.全不选：全选情况下再次点击全选框，所有选项都不选； C:全选情况下，取消某一个或几个子选项，全选框也变为不选中； 没有点击全选的情况下，选中了所有子选项，全选框自动选中。代码示例：html代码： 全选 1选 2选 3选 4选 JAvaScript代码： function setChecked(obj)
JQuery实现复选框CheckBox的全选、反选、提交操作
pan_junbiao的博客
07-29 2371
对复选框最基本的应用，就是对复选框进行全选、反选和提交等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。 【示例】使用Jquery实现复选框CheckBox的全选、反选、提交操作。 （1）创建页面，创建一个表格在表格的第一列中放入一组复选框，并实现复选框的全选、反选、提交操作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
jquery 全选反选 并且获取所有值
最新发布
09-14
使用jQuery实现全选和反选功能，并获取所有选中的值有以下几个步骤： 1. 添加全选和反选的HTML代码： ```html <input type="checkbox" id="selectAll">全选 <input type="checkbox" name="checkbox" value="1">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值