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="CancleAll()"/>
    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody>
            <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>
        <tbody>
            <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.js"></script>
    <script>

        <!--全选-->
        function CheckAll() {
            $(':checkbox').prop('checked',true);
        }
                //取消
                function CancleAll() {
            $(':checkbox').prop('checked',false);
        }
        function reverseAll() {
            $(':checkbox').each(function () {
            //    this指当前循环的每一个元素,this是DOM对象
            //  DOM实现反选
            //     if (this.checked){
            //         this.checked =false;
            //     }else {
            //         this.checked = true ;
            //     }
            //    jQuery实现反选
            //
            //     if ($(this).prop('checked')){
            //         $(this).prop('checked',false);
            //     }else {
            //         $(this).prop('checked',true);
            //     }
            //    三元运算实现反选
            //    var v = 条件?真值:假值
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>

注释:

-选择权
                -
                    -$(':checkbox').prop('checked');获取值
                    -$(':checkbox').prop('checked',true);设置值
                -
                    jQuery方法内置循环:(':checkbox').xxxx
                    
                -    $(':checkbox').prop('checked').each(function(){
                        //this ,DOM,当前循环的元素$(this)
                })
                - var v = 条件 ?真值:假值

原文地址:https://www.cnblogs.com/anhao-world/p/14378133.html