jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)

ylbtech-jQuery:jQuery学习

jQuery语法实例

复选框应用
效果截图
 
jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)HTML代码返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //1,全选
            $("#checkedAll").click(function () {
                $("[name=items]:checkbox").attr('checked', true);
            });
            //2,全不选
            $("#checkedNo").click(function () {
                $("[name=items]:checkbox").attr('checked', false);
            });
            //3,反选
            $("#checkedRev").click(function () {
                $("[name=items]:checkbox").each(function () {
                    //$(this).attr('checked', !$(this).attr('checked'));    //方式一   
                    this.checked = !this.checked;               //方式二
                });
            });
            //4,全选/全不选
            $("#checkedAllOrNo").click(function () {
                $("[name=items]:checkbox").attr("checked", this.checked);
            });
            //5,提交选中的值
            $("#send").click(function () {
                var str = "选中的项是:\n\r";
                $("[name=items]:checkbox:checked").each(function () {

                    str += $(this).val() + '\n\r';
                });

                alert(str);
            });
        });
    </script>
</head>
<body>
<form>
你喜欢的运动?<br />
<label><input name="items" type="checkbox" value="football" />football</label><br />
<label><input name="items" type="checkbox" value="basketball" />basketball</label><br />
<label><input name="items" type="checkbox" value="pingpang" />pingpang</label><br />
<label><input name="items" type="checkbox" value="baseball" />baseball</label><br />
<a id="checkedAll" href="javascript:void(0);">全选</a>-
<a id="checkedNo" href="javascript:void(0);">全不选</a>-
<a id="checkedRev" href="javascript:void(0);">反选</a>-<a id="send" href="javascript:void(0);">提交选中的值</a>-
<label for="checkedAllOrNo">全选/全不选</label>
<input id="checkedAllOrNo" type="checkbox" />
</form>
</body>
</html>
jQuery:1.5.1.B,效果截图返回顶部

 ylbtech-iQuery-checkbox

warn 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
posted on 2013-01-24 17:20  ylbtech  阅读(1771)  评论(0编辑  收藏  举报