分享

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

 昵称10504424 2013-03-06
ylbtech-jQuery:jQuery学习

jQuery语法实例

复选框应用
效果截图
 
jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)HTML代码返回顶部
复制代码
<html xmlns="http://www./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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多