JavaScript练习 - 正反选练习

正反选练习

<!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>

 

posted @ 2018-10-26 20:10  Anec  阅读(179)  评论(0)  编辑  收藏  举报