zoukankan      html  css  js  c++  java
  • jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行

    全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面一定得有括号,否则会报错。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="全选" onclick="checkAll();"/>
        <input type="button" value="反选" onclick="reverseAll();"/>
        <input type="button" value="取消" onclick="cancelAll();"/>
        <table border="1">
            <thead>
                <tr>
                    <th>选项</th>
                    <th>IP</th>
                    <th>port</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
    
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
            </tbody>
    
        </table>
        <script src="jquery-1.12.4.js"></script>
        <script>
            function checkAll(){
                $('#tb :checkbox').prop('checked',true);
            }
            function cancelAll(){
                $('#tb :checkbox').prop('checked',false);
            }
    
        </script>
    
    </body>
    </html>
    

     用DOM实现 全选-反选-取消操作:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="全选" onclick="checkAll();"/>
        <input type="button" value="反选" onclick="reverseAll();"/>
        <input type="button" value="取消" onclick="cancelAll();"/>
        <table border="1">
            <thead>
                <tr>
                    <th>选项</th>
                    <th>IP</th>
                    <th>port</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
    
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
            </tbody>
    
        </table>
        <script src="jquery-1.12.4.js"></script>
        <script>
            function checkAll(){
                $('#tb :checkbox').prop('checked',true);
            }
            function cancelAll(){
                $('#tb :checkbox').prop('checked',false);
            }
            function reverseAll(){
                $('#tb :checkbox').each(function(){
                //this 代指当前循环的每一个元素,this是DOM对象。
                //console.log(this);
            //用DOM实现的 if(this.checked){ this.checked=false; }else{ this.checked=true; } }) } </script> </body> </html>

     效果:

    2.用 jQuery实现 全选-反选-取消操作:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="全选" onclick="checkAll();"/>
        <input type="button" value="反选" onclick="reverseAll();"/>
        <input type="button" value="取消" onclick="cancelAll();"/>
        <table border="1">
            <thead>
                <tr>
                    <th>选项</th>
                    <th>IP</th>
                    <th>port</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
    
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
            </tbody>
    
        </table>
        <script src="jquery-1.12.4.js"></script>
        <script>
            function checkAll(){
                $('#tb :checkbox').prop('checked',true);
            }
            function cancelAll(){
                $('#tb :checkbox').prop('checked',false);
            }
            function reverseAll(){
                $('#tb :checkbox').each(function(){
                    //传2个参数表示设置值,传1个参数表示获取值。
                    if($(this).prop('checked')){
                        $(this).prop('checked',false);
                    }else{
                        $(this).prop('checked',true);
                        }
                    })
                }
    
        </script>
    
    </body>
    </html>
    

     3. 三元运算

    var v=条件?真值:假值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="全选" onclick="checkAll();"/>
        <input type="button" value="反选" onclick="reverseAll();"/>
        <input type="button" value="取消" onclick="cancelAll();"/>
        <table border="1">
            <thead>
                <tr>
                    <th>选项</th>
                    <th>IP</th>
                    <th>port</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
    
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
            </tbody>
    
        </table>
        <script src="jquery-1.12.4.js"></script>
        <script>
            function checkAll(){
                $('#tb :checkbox').prop('checked',true);
            }
            function cancelAll(){
                $('#tb :checkbox').prop('checked',false);
            }
            function reverseAll(){
                $('#tb :checkbox').each(function(){
                    var v=$(this).prop('checked')?false:true;
                    $(this).prop('checked',v);
                    })
                }
    
        </script>
    
    </body>
    </html>
    

     4. 笔记

    实例:
    	全选,反选,取消
    	-选择器
    	-$('#tb :checkbox').prop('checked'); 获取值
    	 $('#tb :checkbox').prop('checked',true); 赋值
    	-jQuery方法内置循环: $('#tb :checkbox').xxxx
    	  $('#tb :checkbox').each(function(k){
    		//k是当前索引
    		//this,DOM,当前循环的元素$(this)
    		})
    	-三元运算:var v=条件?真值:假值
    
  • 相关阅读:
    键盘移动小div(js原生)
    递归好理解,可是不好用啊
    jsonp
    闭包
    json
    来个小例子(ajax)
    ajax小demo
    制作H5响应式页面注意事项、微信二次分享
    Button按钮--inject与provide
    webpack基本打包配置流程
  • 原文地址:https://www.cnblogs.com/momo8238/p/7463587.html
Copyright © 2011-2022 走看看