前端js开发_全选/全不选/反选

html5 前端开发入门|js前端开发入门|前端开发js面试题
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发考虑的主流浏览器:js复选框</title>
</head>
<body>
    <input type=”checkbox” id=”d1″>全选/全不选
    <br>
    <a href=”javascript:;” id=”d2″>反选</a>
    <form action=”” id=”form”>
        <input type=”checkbox” name=”demo” value=”1″>
        <input type=”checkbox” name=”demo” value=”2″>
        <input type=”checkbox” name=”demo” value=”3″>
        <input type=”checkbox” name=”demo” value=”4″>
    </form>
    <script src=”https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js”></script>
    <script>
        var a = 0;
        //全选复选事件
        $(‘#d1’).change(function () {
            if ($(this).is(‘:checked’)) {
                $(‘#form input’).prop(‘checked’, ‘checked’);
                a = 4;
                console.log(a);
            } else {
                $(‘#form input’).prop(‘checked’, false);
                a = 0;
                console.log(a);
            }
        })
        //取消一个取消全选
        $(‘#form input’).change(function () {
            if ($(this).is(‘:checked’)) {
                a++;
                console.log(a);
                //勾选全部自动勾选全选
                if (a == 4) {
                    $(‘#d1’).prop(‘checked’, ‘checked’)
                }
            } else {
                $(‘#d1’).prop(‘checked’, false)
                a–;
                console.log(a);
            }
        })
        //反选
        $(‘#d2’).click(function () {
            $(‘#form input’).each(function () {
                if ($(this).is(‘:checked’)) {
                    //prop不能直接触发change事件
                    $(this).prop(‘checked’, false).change();
                    console.log(a);
                } else {
                    //prop不能直接触发change事件
                    $(this).prop(‘checked’, ‘checked’).change()
                    console.log(a);
                }
            })
        })
    </script>
</body>
</html>

前端开发js调试|js前端开发 的作业|火狐 前端开发插件

» 本文来自:前端开发者 » 《前端js开发_全选/全不选/反选》
» 本文链接地址:https://www.rokub.com/3973.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!