JQUERY复选框

最新推荐文章于 2024-04-25 11:38:14 发布

xw1985520

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量277

点赞数

分类专栏： JQUERY 文章标签： jquery

本文链接：https://blog.csdn.net/xw1985520/article/details/53914712

版权

JQUERY 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo1</title>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <div id="checkbox">
        <input type="checkbox" name="" id="" checked="checked" />吃
        <input type="checkbox" name="" id="" />喝
        <input type="checkbox" name="" id="" />玩
        <input type="checkbox" name="" id="" />乐
    </div>
    <div id="btn">
        <input type="button" id="chkAll" value="全选" />
        <input type="button" id="chkNone" value="全不选" />
        <input type="button" id="chkReverse" value="反选" />
    </div>
    <script>
        var chkAll = $('#chkAll');
        var chkNone = $('#chkNone');
        var chkReverse = $('#chkReverse');
        var checkbox = $('#checkbox>:checkbox');

        chkAll.click(function(){
            // checkbox.attr('checked','checked');
            checkbox.attr('checked',true);
        });

        chkNone.click(function(){
            // checkbox.removeAttr('checked');
            checkbox.attr('checked',false);
        });

        chkReverse.click(function(){
            checkbox.each(function(){
                $(this).attr('checked',!$(this).attr('checked'));
            });
        });

    </script>
</body>
</html>

xw1985520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQUERY复选框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http
复制链接

扫一扫