• Jquery全选系列操作(锋利的jQuery)


    Jquery全选系列操作(锋利的jQuery)

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>复选框应用</title>
        <script src="../../js/jquery-1.4.4.min.js"></script>
    </head>
    <body>
        <form >
            你爱好的运动是?<br />
            <input type="checkbox" name="items" value="足球" />足球
            <input type="checkbox" name="items" value="篮球" />篮球
            <input type="checkbox" name="items" value="羽毛球" />羽毛球
            <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
            <input type="button" id="CheckedAll" value="全选" />
            <input type="button" id="CheckedAllNo" value="全不选" />
            <input type="button" id="CheckedRev" value="反选" />
            <input type="button" id="send"   value="提交" />
        </form>
    
        <!--<form style="display:none" >
            你爱好的运动是?<br />
            <input type="button" id="CheckedAll" value="全选/全不选" />
            <input type="checkbox" name="items" value="足球" />足球
            <input type="checkbox" name="items" value="篮球" />篮球
            <input type="checkbox" name="items" value="羽毛球" />羽毛球
            <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
        </form>-->
        <script>
            $(function ()
            {
                //全选
                $("#CheckedAll").click(function () {
    
                     $('[name=items]:checkbox').attr("checked", true);  //attr() 方法设置或返回被选元素的属性值。
    
                    //下面只是研究,或者是可参考,(我还没弄懂)
                    //判断如果当前复选框被选中
                    //if (this.checked) {
                    //    $('[name=items]:checkbox').attr("checked", true);  //attr() 方法设置或返回被选元素的属性值。
                    //}
                    //else {
                    //    $('[name=items]:checkbox').attr("checked", false);  //attr() 将checked 设置为false即被全不选。
                    //}
    
                    //$('[name=items]:checkbox').attr("checked", this.checked);  //attr() 方法设置或返回被选元素的属性值。
    
                    //可以去掉if判断
                    //$('[name=items]:checkbox').click(function () {
                    //    var flag = true;
                    //    $('[name=items]:checkbox').each(function () {
                    //        if (!this.checked) {
                    //            flag = false;
                    //        }
                    //    });
                    //    $("#checkedall").attr("checked", flag);
                    //})
                 
    
                });
                //全不选
                $("#CheckedAllNo").click(function () {
                    $('[name=items]:checkbox').attr("checked", false);  //attr() 将checked 设置为false即被全不选。
                });
    
                //反选,如果选中,则不选中,如果不选中则选中
                //$("#CheckedRev").click(function () {
                //    $('[name=items]:checkbox').each(function () {
                //        $(this).attr("checked", !$(this).attr("checked"));  //$(this)取出当前对象并转换为jQuery对象
                //    })
                //});
    
                //代码简化反选
                $("#CheckedRev").click(function () {
                    $('[name=items]:checkbox').each(function () {
                        this.checked = !this.checked;
                    })
                });
    
                //提交显示选中的check值
                $("#send").click(function ()
                {
                    var str = "你选中的是
    ";
                    $('[name=items]:checkbox:checked').each(function () {
                        str += $(this).val() + "
    ";
                    });
                    alert(str)
                })
            })
        </script>
    </body>
    </html>
    

      

    生命中最值得欣慰的,莫过于一觉醒来,你还在身旁
  • 相关阅读:
    手把手教你使用UICollectionView写公司的项目
    深入研究Block捕获外部变量和__block实现原理
    聊聊 iOS 开发中的协议
    如何快速的开发一个完整的iOS直播app(原理篇)
    萌货猫头鹰登录界面动画iOS实现分析
    浅谈 block(1) – clang 改写后的 block 结构
    iOS 开发中你是否遇到这些经验问题(二)
    iOS 开发中你是否遇到这些经验问题(一)
    iOS 本地自动打包工具
    Storyboards vs NIB vs Code 大辩论
  • 原文地址:https://www.cnblogs.com/chaonuanxi/p/10336230.html
Copyright © 2020-2023  润新知