码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript练习 - 正反选练习

时间:2018-10-26 19:31:26      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:div   src   each   function   col   als   click   box   body   

正反选练习

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

 

JavaScript练习 - 正反选练习

标签:div   src   each   function   col   als   click   box   body   

原文地址:https://www.cnblogs.com/Anec/p/9857747.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!