使用Jquery实现全选、全不选、反选功能

最新推荐文章于 2024-04-17 09:12:12 发布

夏小白.

最新推荐文章于 2024-04-17 09:12:12 发布

阅读量696

点赞数

分类专栏： jquery全选反选文章标签： jquery

本文链接：https://blog.csdn.net/xia1140418216/article/details/107869243

版权

jquery全选反选专栏收录该内容

1 篇文章 0 订阅

订阅专栏

  <!DOCTYPE html>
   <html>
  <head>
	<meta charset="UTF-8">
	<title></title>
    </head>
  <body>
	
     	<!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
   <title>jq简单实现全选与反选</title>
   <script src="js/jquery1.11.3.min.js"></script>
</head>
<body>
<div id="dv">
<input type="checkbox" name="name" value="" />曹操<br />
<input type="checkbox" name="name" value="" />周瑜<br />
<input type="checkbox" name="name" value="" />诸葛亮<br />
<input type="checkbox" name="name" value="" />刘备<br />
<input type="checkbox" name="name" value="" />张飞<br />

</div>
  <hr/>
<input type="button" id="selectAll" value="全选"/>
<input type="button" id="noSelect" value="全不选"/>
<input type="button" id="select" value="反选"/>
<script>
//    全选
$ ( '#selectAll' ).click ( function () {
    $ ( '#dv>input' ).each ( function ( i , v ) { //函数的参数可以不传
        this.checked = true;
//                return false;   //return false可以跳出当前循环,此时函数只执行一次
    } )
} )
//    全不选
$ ( '#noSelect' ).click ( function () {
    $ ( '#dv>input' ).each ( function ( i , v ) {
        this.checked = false;
    } )
} )
//    反选
$ ( '#select' ).click ( function () {
    $ ( '#dv>input' ).each ( function ( i , v ) {
        this.checked = ! this.checked;  //此时的选中状态与当前的相反
    } )
} )

 </script>
</body>
 </html>
</body>
 </html>

夏小白.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Jquery实现全选、全不选、反选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <tit..
复制链接

扫一扫