码迷,mamicode.com
首页 > Web开发 > 详细

jQuery简单实现全选与反选

时间:2017-06-16 10:03:47      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:false   htm   参数   3.1   实现   utf-8   charset   inpu   技术分享   

全选与反选相信在实际的开发中经常用到,下面demo一段代码;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq简单实现全选与反选</title>
    <script src="jquery-3.1.0.js"></script>
</head>
<body>
<div id="dv">
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><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>

 技术分享

 

jQuery简单实现全选与反选

标签:false   htm   参数   3.1   实现   utf-8   charset   inpu   技术分享   

原文地址:http://www.cnblogs.com/mysmalldream/p/7021252.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!