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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

你可能感兴趣的:(jquery)