Juery实现的小案例1、实现复选框的全选、全不选以及反选

Juery实现的小案例1、实现复选框的全选、全不选以及反选,第1张

<html>
<head>
    <meta charset="utf-8"/>
    <script  src="jquery-1.4.2.min.js"></script>//在此处的Jquery文件封装的js文件下载地址:http://download.csdn.net/detail/feilong_12/5210621
    <script>
    $(function(){
                    $("#checkAll").click(function(){
                    $(":checkbox").attr("checked",true);
                    });
                    $("#checkNo").click(function(){
                    $(":checkbox").attr("checked",false);
                    });
                    $("#checkRes").click(function(){
            $("input:checkbox[name=items]").each(function(){
                    $(this).attr("checked",!$(this).attr("checked"))    ;        
                    });
                    })
            })
    </script>
</head>
<body>
    <form action="#" method="post">
            <input type="checkbox" name="items" value="篮球" />篮球
            <input type="checkbox" name="items" value="足球" />足球
            <input type="checkbox" name="items" value="篮球" />乒乓球
            <input type="checkbox" name="items" value="篮球" />羽毛球
            <input type="button" id="checkAll" value="全选"/>
            <input type="button" id="checkNo" value="全不选"/>
            <input type="button" id="checkRes" value="反选"/>
    </form>
</body>
</html>

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/2086490.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-07-22
下一篇 2022-07-22

发表评论

登录后才能评论

评论列表(0条)

保存