zoukankan      html  css  js  c++  java
  • 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/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    电容降压的工作原理与计算
    B站开源ijkplayer 等多个项目
    Kindle支持哪些格式
    PPM格式解析
    YUV RGB播放器 打开, 显示RGB数据
    How to print 如何输出 int64_t,uint64_t的值 in C
    FileSeek文件内容搜索工具下载
    对android录制的NV21视频数据进行旋转(90,180,270)与剪切
    Adobe Flash Media Server安装
    Linux使用du和df查看磁盘和文件夹占用空间
  • 原文地址:https://www.cnblogs.com/ylbtech/p/2875351.html
Copyright © 2011-2022 走看看