zoukankan      html  css  js  c++  java
  • jQuery简单实现全选与反选

    全选与反选相信在实际的开发中经常用到,下面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>

     

    ★★前端新手一枚,写的内容是自己对知识点的理解,如有不妥之处,还请各位大牛不吝赐教,批评指正.谢谢★★
  • 相关阅读:
    i春秋CTF-web-upload
    [转]SEP 11.x 迁移
    通过SEP禁用USB
    通过SEP屏蔽共享文件夹
    SEP图示
    离线更新SEPM服务器的病毒定义库
    SEPM安装完之后的一些细节之处
    Bloomberg SEP 12.x 迁移小记
    LiveUpdate Adminstrator配置手册
    Symantec更新服务器
  • 原文地址:https://www.cnblogs.com/mysmalldream/p/7021252.html
Copyright © 2011-2022 走看看