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=条件?真值:假值

 

posted on 2017-09-01 15:49  momo8238  阅读(291)  评论(0编辑  收藏  举报