Anec

正反选练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div>
        <input type="button" value="全选" onclick="f1()">
        <input type="button" value="反选" onclick="f2()">
        <input type="button" value="取消" onclick="f3()">


        <ul>
            <li><input type="checkbox">aaaaa</li>
            <li><input type="checkbox">aaaaa</li>
            <li><input type="checkbox">aaaaa</li>
            <li><input type="checkbox">aaaaa</li>
            <li><input type="checkbox">aaaaa</li>
            <li><input type="checkbox">aaaaa</li>
        </ul>
    </div>

    <script src="jquery-1.12.4.min.js"></script>
    <script>
        // function f1(){
        //     $(\':checkbox\').each(function () {
        //         $(this).prop(\'checked\',true)
        //     })
        // }
        function f1(){
            $(\':checkbox\').prop(\'checked\',true);
        }
        function f2(){
            $(\':checkbox\').each(function () {
                if ($(this).prop(\'checked\')){
                    $(this).prop(\'checked\',false)
                }
                else {
                    $(this).prop(\'checked\',true)
                }
            })
        }
        function f3(){
            $(\':checkbox\').removeProp("checked");
        }
    </script>
</body>
</html>

 

分类:

技术点:

相关文章: