jquery-实用例子

一：jquery实现全选取消反选
　　3元运算：条件？真值：假值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="selectAll()">
     <input type="button" value="取消" onclick="cancelAll()">
     <input type="button" value="dom反选" onclick="reverserAll()">
    <input type="button" value="jQuery反选" onclick="reverserAll2()">
      <input type="button" value="jQuery三元运算实现反选" onclick="reverserAll3()">
    <table id="tb" border="1">
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>1191</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.2</td>
            <td>1192</td>
        </tr>
                <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.3</td>
            <td>1193</td>
        </tr>
    </table>
    <script src="jquery-1.12.3.js"></script>
    <script>
        function selectAll(){
            $("#tb :checkbox").prop("checked",true);//jquery默认自带循环
        }

        function cancelAll(){
            $("#tb :checkbox").prop("checked",false);
        }
        //反选两种方法dom实现和jquery实现
        //dom实现
        function reverserAll(){
            $("#tb :checkbox").each(function(){//each遍历
                    if (this.checked) //this这里是dom对象
                    {
                        this.checked=false;
                    }else {
                        this.checked=true;
                    }

                }
            )
        }
        function reverserAll2(){
            $("#tb :checkbox").each(function() {//each遍历
                if($(this).prop("checked"))//$(this)转jquery对象
                {
                    $(this).prop("checked",false);
                }else
                {
                   $(this).prop("checked",true);
                }
            }
            )
        }
        //3元运算实现反选
        // 条件？真值：假值

        function reverserAll3(){
            $("#tb :checkbox").each(
                    function(){
                        var v=$(this).prop("checked")?false:true;
                        $(this).prop("checked",v);
                    }
            )
        }
    </script>
</body>
</html>
View Code